详解koa2学习中使用 async 、await、promise解决异步的问题


Posted in Javascript onNovember 13, 2018

关键词:async 、await、promise

这三个东西 可以优雅的解决异步问题。在学习koa2的时候遇到了获取数据后再进行模板渲染的异步问题。在查找各种资料后成功的解决了该问题,现在写个笔记记录一下。

先说一下async、await,第一次见到这两个词是在学习vue的时候。因为前端在写代码的时候经常的会遇到向后台请求数据这样的场景,等待数据返回才可以进行下一步的操作。这就不得不处理异步这种情况。

async、await基本的语法就是:

let asyncFn = async()=> {
 let data = null;
 data = await getData(url);//getData()返回的数据是 {name:'my name is data!'}
 console.log(data.name);//打印出的是my name is data! 
}

getData();为一个封装了请求数据的方法;

如果不处理异步的情况:

let notAsyncFn =()=> {
 let data = null;
 data = getData(url);//getData()返回的数据是 {name:'my name is data!'}
 console.log(data.name);//打印出的是undefined; 因为data此时还是null;
}

await 命令后面的 函数返回的是一个Promise 对象,运行结果可能是 rejected,所以最好把 await 命令放在 try...catch 代码块中。

getData函数的代码:

var getData = function (url){
  console.log("get start");
  console.log(url);
  return new Promise(function (resolve, reject) {
//下面的request()方法 是nodeJS的request模块;
   request(url, function (error, response, body) {
    if (!error && response.statusCode == 200) {
     resolve(response.body);
    }else{
     //throw new Error(response.statusText)
     reject('===error===');
    }
   });

  })

  console.log("get end");

 }

promise的相关介绍可以移步 大白话讲解Promise(一)

还有await 命令只能用在 async 函数之中,如果用在普通函数,就会报错。

koa2中具体的代码:

/**
 * koa2路由代码
 */
//引入router模块
var router = require('koa-router')();
//引入server模块 封装的请求函数
var server = require('../server');
//url 是假的额 写的百度的网址
const url = 'www.baidu.com';

router.get('/',async function (ctx,next){
 var data = await server.get(url);
 console.log('======data=====');
 console.log(data);
 await ctx.render('myPage',{
  title: '123wangcong',
  data: data
 })
});
module.exports = router;
/**
 * server模块的代码
 */
node的request模块
var request = require('request');
module.exports = {
 get : function (url){
  console.log("get start");
  console.log(url);
  return new Promise(function (resolve, reject) {
   request(url, function (error, response, body) {
    if (!error && response.statusCode == 200) {
     resolve(response.body);
    }else{
     //throw new Error(response.statusText)
     reject('error===');
    }
   });

  })
  console.log("get end");
 }
}

把package也贴出来

{
 "name": "koa2-demo",
 "version": "0.1.0",
 "scripts": {
 "start": "NODE_ENV=development ./node_modules/.bin/nodemon bin/run",
 "test1": "NODE_ENV=test ./node_modules/.bin/nodemon bin/run",
 "koa": "./node_modules/.bin/runkoa bin/www",
 "pm2": "pm2 start bin/run ",
 "test": "./node_modules/.bin/mocha -u bdd"
 },
 "dependencies": {
 "co": "^4.6.0",
 "debug": "^2.2.0",
 "ejs": "^2.5.6",
 "jade": "~1.11.0",
 "koa": "^2.0.0",
 "koa-bodyparser": "^2.0.1",
 "koa-convert": "^1.2.0",
 "koa-json": "^1.1.1",
 "koa-logger": "^1.3.0",
 "koa-onerror": "^1.2.1",
 "koa-request": "^1.0.0",
 "koa-router": "^7.0.0",
 "koa-static": "^1.5.2",
 "koa-views": "^5.0.1",
 "runkoa": "^1.5.2"
 },
 "devDependencies": {
 "mocha": "^2.4.5",
 "nodemon": "^1.9.1",
 "should": "^8.3.0",
 "supertest": "^1.2.0"
 }
}

哦对了 async函数里可以多次使用await 语句,我以为只能用一次await!!!并不是的!!!!

async更详细的介绍可以 看这里 阮一峰async 函数的含义和用法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
Javascript 刷新全集常用代码
Nov 22 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
js原型链原理看图说明
Jul 07 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
vue实现动态数据绑定
Apr 28 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
koa源码中promise的解读
Nov 13 #Javascript
vue-router传递参数的几种方式实例详解
Nov 13 #Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 #Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 #Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 #Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 #Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 #Javascript
You might like
PHP 学习路线与时间表
2010/02/21 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
js滚动条回到顶部的代码
2011/12/06 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
python实现在IDLE中输入多行的方法
2018/04/19 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
出纳的岗位职责
2013/11/09 职场文书
化学专业毕业生自荐信
2013/11/15 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
团员个人总结
2015/02/26 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python