详解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代码
Aug 22 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
Jun 19 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中的integer类型使用分析
2010/07/27 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python实现基于SVM手写数字识别功能
2020/05/27 Python
Flask核心机制之上下文源码剖析
2018/12/25 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
python缩进长度是否统一
2020/08/02 Python
如何真正的了解python装饰器
2020/08/14 Python
python实现人工蜂群算法
2020/09/18 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
物理系毕业生自荐信
2013/11/01 职场文书
ktv好的活动方案
2014/08/17 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
常住证明范本
2015/06/23 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL