day9-0812

上次在用form做文件上传的时候，自己方便测试使用koa搭建了一个临时后台「其实很早之前就已经接触了，express的替代者，更轻量化，富中间件化」

koa的使用虽然也只是简单的了解层面，不过还是get到一些不一样的事情

从一个简单的form表单引申出的都有什么呢？

  • koa服务器的开启
  • koa的表单处理中间件koa-body
  • promise的使用 - 「是在没想到koa使用promise到这种地步」
  • async & await - 「老生畅谈 - 异步，同步糟心事惹」
  • imdb-api的简单使用 - 「之前有用unsplash的api做过一个每日推送美图的vueapp」

细想一下，哇咔咔，还是有好多新坑需要填。

#1. koa的服务器开启

koa作为express的替代者，达到同样目的情况下给人一种简洁的美。

const Koa = require('koa');
const app = new Koa();

const main = ctx => {
    ctx.response.body = 'serer ha, gotcha!'
}

app.use(main)

app.listen(3006, () => {
    console.log('server running ...')
})

  • main作为服务器相应主函数，知道你想使用路由，直接判断ctx.request.path === your_path就可以啦！- 「原生的哦」

  • 当然，路由也可以使用中间件koa-route。「要自己去查哦！」

#2. koa-body中间件

为了能够获取前端传来的form表单的数据你需要获取post data 或者是get parameters，来进行相应的处理

const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();


// 文件处理
const main = async function(ctx) {
  const files = ctx.request.body.files // get your files with body.files
};

app.use(koaBody({ multipart: true }));
app.use(main)

app.listen(3006, () => {
  
    console.log('server running ...')
})
  • 文件的处理需要async的帮助，不止是文件处理，还有其他的异步操作，比如ajax的数据请求，原因是「REASON」

#3. promise的使用

promise的语法糖真的是好甜！
使用promise的写法不仅可以更清楚的表达你的逻辑，更重要的是很美

const queryMovie = (movie) => {
    return new Promise((resolve, reject) => {
        imdb.get({
            name: movie
            // id: 'tt3896198'
        }, {
            apiKey: OMDB_KEY_HONGWING,
            timeout: 30000
        }).then((res) => {
            // 数据正常就是 resolve
            resolve(res)
        }).catch((e) => {
           // 数据异常就是 reject
            reject(e)
        })
    })
    
}
  • 简单点来说，就是将函数的执行就类似于pipe。倘若达到你的条件，就会流向你该条所导向的地方 - 「resolve & reject」
  • Note: 经常的使用会有助于你将你的代码逻辑转向promise，更加清楚真个逻辑流程 「不要强行使用哦！」

#4. async & await 再次相遇

F.E.D始终逃不掉的就是异步 & 同步，「 REASON 」Javascript with single thread
异步的常见的会有: 回调函数，发布订阅，时间驱动处理，和 promise


const movieQuery = async function (ctx) {
    const moviename = ctx.request.url.split('?')[1].split('=')[1]
    await queryMovie(moviename).then((res) => {
        console.log(res)
        ctx.body = res
    }).catch((e) => {
        ctx.body = e
    })
};
  • async表明了函数是异步执行的，这个异步执行的函数内部使用了await表明了需要在执行 queryMovie() - ajax时等一下即同步。
  • Note: 「四种常见的写法记得去看看哦！」

#5. imdb-api 相关

imdb-api是一个包，用于获取imdb提供的电影信息

The ant man
  • 使用比较简单 拥有一个omdb_key就可以啦！ 「daily 1000 times」
  • 可以展开你的想法，「做出好玩的东西哦！」

#End preference