100-days-Coding - day9

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提供的电影信息

作者：亨利何
链接：https://www.jianshu.com/p/977e3a76f3ea