koa是下一代的Node.js web框架。
我們首先使用koa來實現一個簡單的hello world吧!假如目前的專案結構如下:
### 目錄結構如下: koa-demo1 # 工程名 | |--- app.js # node 入口檔案 | |--- node_modules # 專案依賴包 | |--- package.json
app.js 程式碼如下:
const Koa = require('koa'); const app = new Koa(); app.use(async (ctx, next) => { console.log(ctx); await next(); ctx.response.type = 'text/html'; ctx.response.body = 'hello world'; }); app.listen(3001); console.log('app started at port 3001...');
如上,對於頁面中每一個http請求,koa將呼叫如上非同步函式來處理。進入專案中的根目錄執行 node app.js 後,在頁面中訪問 http://localhost:3001/ 後重新整理看到node控制檯列印 console.log(ctx); 如下資訊:
引數ctx是koa傳入封裝的了request和response的變數,如上圖可以看到,我們就可以通過ctx來訪問request和response的資料了,我們可以再看下瀏覽器中 header資訊如下,我們可以對比下 上面圖和下面的圖:
並且我們在看看瀏覽器中網路請求可以看到有如下兩條請求,在node中也可以看到列印了二次,說明對於頁面中每一個http請求,koa將呼叫如上非同步函式來處理的,如下所示:
如上的程式碼非同步函式中,使用了 await next();來處理下一個非同步函式,和express中的 next()方法類似的功能,然後設定 response的Content-Type的內容。
async的理解為:用於宣告一個function是非同步的,並且返回的是一個promise物件,如下程式碼:
async function testAsync() { return 'hello world'; } const a = testAsync(); console.log(a);
在瀏覽器中列印如下:
await的含義是:用於等待一個非同步方法執行完成(同步等待)。
await在等待async非同步方法執行完畢,await必須在async方法中才可以使用。
如下程式碼demo理解:
function getData () { return 'hello world'; } async function testAsync() { return 'hello xxxx'; } async function testAsync2() { const a1 = await testAsync(); const a2 = await getData(); console.log(a1); // hello xxxx console.log(a2); // hello world } testAsync2();
如上程式碼 getData是同步方法,testAsync是非同步方法的,都會返回一條資訊,但是在testAsync2非同步方法內部,都使用await 使資料同步返回,因此結果列印: hello xxxx;和 hello world了。
但是如果我們在 testAsync2 函式內部不使用 await 這個,直接呼叫 testAsync()方法和getData()方法的話,那麼testAsync就會返回一個promise物件了,如下程式碼:
function getData () { return 'hello world'; } async function testAsync() { return 'hello xxxx'; } function testAsync2() { const a1 = testAsync(); const a2 = getData(); console.log(a1); console.log(a2); } testAsync2();
執行結果如下所示:
1. async的作用是?
async函式它會返回一個promise物件,我們可以通過promise物件的then方法來獲取如上的 'hello world' 的值,如下程式碼所示:
async function testAsync() { return 'hello xxxx'; } const test = testAsync(); console.log(test); // Promise {<resolved>: "hello xxxx"} test.then(data => { console.log(data); // 列印 hello xxxx });
2. await的作用是?
await可以理解為同步等待當前的async的執行,且等async後的promise物件執行resolve,然後拿到resolve的值,作為await表示式的運算結果。程式碼才會繼續往下執行。
我們可以看如下demo來理解下:
function testA() { return 'hello world'; } async function testA2() { return 'xxxx'; } async function testA3() { // 等待返回 'heelo world' const a1 = await testA(); // 待會返回promise物件的resolve的值,才會繼續往下執行 const a2 = await testA2(); console.log(a1 + '--' + a2); // 會列印 hello world--xxxx } testA3();
3. async + await + promise 解決非同步問題
如下基本的程式碼:
let url = 'xxxxx'; // url 地址 let asyncFn = async () => { let data = null; data = await getData(url); console.log(data); } const getData = function(url) { return new Promise((resolve, reject) => { // 如下簡單的使用 ajax來演示下,專案中具體使用fetch還是其他都可以的 $.ajax({ type: 'get', dataType: 'json', data: { }, success: function(d) { resolve(d); }, error: function(e) { reject(e); } }) }); }