day9-0812
上次在用form做文件上傳的時候丑蛤，自己方便測試使用koa搭建了一個臨時后臺「其實(shí)很早之前就已經(jīng)接觸了捌刮，express的替代者，更輕量化，富中間件化」
koa的使用雖然也只是簡單的了解層面袜啃，不過還是get到一些不一樣的事情
從一個簡單的form表單引申出的都有什么呢？
-
koa服務(wù)器的開啟 -
koa的表單處理中間件koa-body -
promise的使用 - 「是在沒想到koa使用promise到這種地步」 -
async & await- 「老生暢談 - 異步匈子，同步糟心事惹」 -
imdb-api的簡單使用 - 「之前有用unsplash的api做過一個每日推送美圖的vueapp」
細(xì)想一下路召，哇咔咔，還是有好多新坑需要填栋烤。
#1. koa的服務(wù)器開啟
koa作為express的替代者谒养，達(dá)到同樣目的情況下給人一種簡潔的美。
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作為服務(wù)器相應(yīng)主函數(shù)明郭，知道你想使用路由买窟，直接判斷ctx.request.path === your_path就可以啦！- 「原生的哦」當(dāng)然薯定，路由也可以使用中間件
koa-route始绍。「要自己去查哦话侄！」
#2. koa-body中間件
為了能夠獲取前端傳來的form表單的數(shù)據(jù)你需要獲取
post data或者是get parameters亏推，來進(jìn)行相應(yīng)的處理
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的數(shù)據(jù)請求盏浇，原因是「REASON」
#3. promise的使用
promise的語法糖真的是好甜！
使用promise的寫法不僅可以更清楚的表達(dá)你的邏輯芽狗，更重要的是很美
const queryMovie = (movie) => {
return new Promise((resolve, reject) => {
imdb.get({
name: movie
// id: 'tt3896198'
}, {
apiKey: OMDB_KEY_HONGWING,
timeout: 30000
}).then((res) => {
// 數(shù)據(jù)正常就是 resolve
resolve(res)
}).catch((e) => {
// 數(shù)據(jù)異常就是 reject
reject(e)
})
})
}
- 簡單點(diǎn)來說绢掰，就是將函數(shù)的執(zhí)行就類似于
pipe。倘若達(dá)到你的條件童擎，就會流向你該條所導(dǎo)向的地方 - 「resolve & reject」 - Note: 經(jīng)常的使用會有助于你將你的代碼邏輯轉(zhuǎn)向
promise滴劲，更加清楚真?zhèn)€邏輯流程 「不要強(qiáng)行使用哦！」
#4. async & await 再次相遇
F.E.D始終逃不掉的就是異步 & 同步顾复，「 REASON 」Javascript with single thread
異步的常見的會有: 回調(diào)函數(shù)班挖，發(fā)布訂閱，時間驅(qū)動處理芯砸，和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表明了函數(shù)是異步執(zhí)行的聪姿，這個異步執(zhí)行的函數(shù)內(nèi)部使用了await表明了需要在執(zhí)行queryMovie() - ajax時等一下即同步。 - Note: 「四種常見的寫法記得去看看哦乙嘀！」
#5. imdb-api 相關(guān)
imdb-api是一個包末购，用于獲取imdb提供的電影信息
The ant man
- 使用比較簡單 擁有一個omdb_key就可以啦！ 「
daily 1000 times」 - 可以展開你的想法虎谢，「做出好玩的東西哦盟榴！」
#End preference
- 阮一峰的koa框架教程
- 阮一峰的異步編程的方法
-
ps:
常看大神博客有利于健康成長
