理解koa2 之 async + await + promise

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);
      }
    })
  });
}

原文地址:https://www.cnblogs.com/tugenhua0707/p/10188324.html

时间: 2024-10-08 12:03:27

理解koa2 之 async + await + promise的相关文章

【前端_js】理解 JavaScript 的 async/await

async 和 await 在干什么 任意一个名称都是有意义的,先从字面意思来理解.async 是“异步”的简写,而 await 可以认为是 async wait 的简写.所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成. 理解 JavaScript 的 async/await 原文地址:https://www.cnblogs.com/leiblog/p/11057896.html

理解 JavaScript 的 async/await

随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await.我第一次看到这组关键字并不是在 JavaScript 语言里,而是在 c# 5.0 的语法中.C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用,因此我还很悲伤了一阵--为了要兼容 XP 系统,我们开发的软件不能使用高于 4.0 版本的 .NET Framework. 我之前在<闲谈异步调用"扁平"化> 中就谈到了这个问题.无论

简单理解JavaScript 的async/await

什么是Async/Await? async 函数 : 是 Generator 函数的语法糖 async函数返回一个 Promise 对象,可以使用then方法添加回调函数.当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句. async/await与Promise一样,是非阻塞的 async函数返回的是 Promise 对象,可以作为await命令的参数 二.语法 1.返回 Promise 对象 async函数返回一个 Promise 对象. asyn

async await promise

async 异步函数,以后可能会用得很广. 1.箭头函数: 没有{}时不写return 也有返回值 2.Promise : 异步神器,很多异步api都是基于Promise 3.new Promise().then().then().catch() :第一个then触发条件:是 Promise() 实例化时resolve()触发, 第二个及以后的then() 触发条件是前一个then() 代码被执行一遍,不包括异步代码,如果有return,后面的代码不再执行,并且将return值作为下一个then

callback vs async.js vs promise vs async / await

需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = function (code) { if (code) { return true; } else { return false; } } let readFileA = function (callback) { if (read(1)) { return callback(null, "111");

从地狱到天堂,Node 回调向 async/await 转变

Node7.6 开始正式支持 async/await,而 async/await 由于其可以以同步形式的代码书写异步程序,被喻为异步调用的天堂.然而 Node 的回调模式在已经根深蒂固,这个被喻为"回调地狱"的结构形式推动了 Promise 和 ES6 的迅速成型.然而,从地狱到天堂,并非一步之遥! async/await 基于 Promise,而不是基于回调,所以要想从回调地狱中解脱出来,首先要把回调实现修改为 Promise 实现--问题来了,Node 这么多库函数,还有更多的第三

async await yield

问题:async 和yield有什么区别? 无奈只能用“书到用时方恨少”来解释这个问题了.其实也是自己从开始编程就接触的是nodejs中的async 以及await ,yield几乎.貌似好像都没使用过,至于它俩的区别,自己也就一知半解了,还希望看到这个问题的大神可以指教一二. 零零总总的总结一点: 1.ES6语法:async 与await搭配使用,不能拆开: 2.都是属于异步方案: 3.本质上:是解决异步编程怎么像同步编成那样写的: 4.yield :需要手动控制异步执行过程,调用.next(

async包 ES6 async/await的区别

最基本的async 包 ApCollection.find({}).toArray(function (err, aps) { var num = 0; async.whilst( function () { return num++ < aps.length; }, function (callback) { if (aps[num]) { var apmac = aps[num].AP_MAC; ApHeartCollection.findOne({ AP_MAC: apmac, time:

小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误. 这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.那接下来我就教大家如何在小程序代码里使用es7的async和await语法.