数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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

来源:脚本之家  责任编辑:小易  

本文实例讲述了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();

看结果

虽然结果出来了,可是这种写法真的挺难受的,下面来一个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();

下面看结果

当然还剩最后一点,处理异常,可以加上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程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • .net中的async和await关键字使用及task异步调用实例
  • 详解es6之async+await 同步/异步方案
  • async/await与promise(nodejs中的异步操作问题)
  • nodejs通过async/await处理异步的方法
  • 浅谈async和await如何简化异步编程(几个实例让你彻底明白)
  • 详解node async/await 更好的异步编程解决方案
  • 三分钟学会用es7中的async/await进行异步编程
  • es6 javascript的异步操作实例详解
  • 详解es6 系列之异步处理实战
  • 基于javascript实现点击页面任何位置返回
  • js动态获取当前时间,并写到特定的区域
  • javascript数组push方法使用注意事项
  • 可拖动可改变大小div的实现代码
  • javascript实现的字符串replaceall函数代码分享
  • javascript中return,return true,return false三者的用法及区别
  • 文本框中,回车键触发事件的js代码[多浏览器兼容]
  • 微信小程序模板和模块化用法实例分析
  • js验证 只能输入小数点,数字,负数的实现方法
  • bootstrap基础知识学习笔记
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved