JS基于ES6新特性async await进行异步处理操作示例


Posted in Javascript onFebruary 02, 2019

本文实例讲述了JS基于ES6新特性async await进行异步处理操作。分享给大家供大家参考,具体如下:

我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子:

先写上json文件:

code.json:

{
  "code":0,
  "msg":"成功"
}

person.json:

{
  "code":0,
  "list":[
    {
      "id":1,
      "name":"唐僧"
    },
    {
      "id":2,
      "name":"孙悟空"
    },
    {
      "id":3,
      "name":"猪八戒"
    },
    {
      "id":4,
      "name":"沙僧"
    }
  ]
}

比如我们有两个请求,如下,这里用的axios:

function getCode(){
  return axios.get('json/code.json');
}
function getlist(params){
  return axios.get('json/person.json',{params})
}

我们第二个请求获取列表的时候需要使用第一个请求得到的code值,只有code值为0时,才能请求,而且当做参数传进去,那么我们看一下常规的做法吧

function getFinal(){
   console.log("我是getFinal函数")
   getCode().then(function(res){
     if(res.data.code == 0){
        console.log(res.data.code);
         var params = {
           code:res.data.code
         }
        getlist(params).then(function(res){
          if(res.data.code == 0){
             console.log(res.data.list);
            }
          })
        }
     })
}
getFinal();

看结果

JS基于ES6新特性async await进行异步处理操作示例

虽然结果出来了,可是这种写法真的挺难受的,下面来一个async await的写法

async function getResult(){
      console.log("我是getResult函数")
      let code = await getCode();
      console.log(code.data.code);
      if(code.data.code == 0){
        var params = {
          code:code.data.code
        }
        let list = await getlist(params);
        console.log(list.data.list);
      }
    }
getResult();

下面看结果

JS基于ES6新特性async await进行异步处理操作示例

当然还剩最后一点,处理异常,可以加上try catch

async function getResult(){
      console.log("我是getResult函数")
      try{
        let code = await getCode();
        console.log(code.data.code);
        if(code.data.code == 0){
          var params = {
            code:code.data.code
          }
          let list = await getlist(params);
          console.log(list.data.list);
        }
      }catch(err){
        console.log(err);
      }
    }
getResult();

个人认为做vue项目的时候,如果对于异常没有特殊处理,可以不加try catch,因为打印出来的错误跟vue自己报的错误是一样的,而且还是黑的字体,不如醒目的红色来的痛快啊!当然如果要对错误进行特殊处理,那么就加上吧

代码风格是不是简便了许多,而且异步代码变成了同步代码,下面我稍微讲一下后者写法的代码执行顺序

首先在 function 前面加 async 用来说明这个函数是一个异步函数,当然,async是要和await配合使用的,第一个请求

let code = await getCode();

await 意思是等一下,等着getCode()这个函数执行完毕,得到值后再赋值给code,然后再用code的值进行下一步操作,就是这么简单!!!赶紧去改代码!!

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
Node.js编码规范
Jul 14 Javascript
css与javascript跨浏览器兼容性总结
Sep 15 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
js和jquery中获取非行间样式
May 05 jQuery
通俗易懂地解释JS中的闭包
Oct 23 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 #Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 #Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 #Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 #Javascript
JS实现数组去重及数组内对象去重功能示例
Feb 02 #Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 #Javascript
You might like
深入了解PHP类Class的概念
2012/06/14 PHP
php curl的深入解析
2013/06/02 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
基于Jquery的简单&简陋Tabs插件代码
2010/02/09 Javascript
javascript 精粹笔记
2010/05/09 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
2019/04/09 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python中global用法实例分析
2015/04/30 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
责任书格式范文
2014/07/28 职场文书
高考升学宴答谢词
2015/01/20 职场文书
2015新学期家长寄语
2015/02/26 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL