详解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 相关文章推荐
javascript 闭包详解
Feb 15 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 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中的CMS的涵义
2007/03/11 PHP
php flv视频时间获取函数
2010/06/29 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
python中的函数用法入门教程
2014/09/02 Python
Python查找相似单词的方法
2015/03/05 Python
Python实现的简单算术游戏实例
2015/05/26 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python制作抖音代码舞
2019/04/07 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
给校长的建议书500字
2014/05/15 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
横空出世观后感
2015/06/09 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android