基于ES6新特性异步等待的JS异步处理操作示例

在本文中，一个例子告诉我们，JS基于新的ES6特性async await执行异步处理操作。分享给大家参考，如下：

我们在项目中经常会遇到这样的业务需求，就是先发出一个ajax请求，然后再发出下一个ajax请求，下一个请求需要使用从上一个请求中获取的数据。请求少的话很容易说，请求多的话需要层层嵌套，好像有点回调，挺恶心的。接下来，我将讨论如何使用async await，这是ES6的一个新特性，让上面的情况像写作一样

先写json文件：

code . js :

{'code':0，' msg ' : ' success ' } person . js :

{ '代码' :0，'列表' : [{'id' :1，'姓名' : '唐僧' }，{'id':2，'姓名' : '孙悟空' }，{'id' :3，

函数getCode(){ return axios . get(' JSON/code . JSON ')；}函数getlist (params) {return axios。get ('JSON/person。JSON '，{params})}我们需要在第二次请求列表时使用从第一次请求中获得的代码值。只有当代码值为0时，我们才能请求它并将它作为参数传入，所以让我们看看常规的做法

函数getFinal(){ console.log('我是getFinal函数')getcode()。然后(函数(RES){ if(RES . data . code==0){ console . log(RES . data . code)；var params={ code : RES . data . code } get list(params)。然后(函数(RES){ if(RES . data . code==0){ console . log(RES . data . list)；} })})})getFinal()；看看结果

虽然结果出来了，但这种写法真的很别扭。让我们写一个软件。

Async函数getResult () {console.log('我是getResult函数')让code=wait getCode()；console . log(code . data . code)；if(code . data . code==0){ var params={ code : code . data . code } let list=wait get list(params)；console . log(list . data . list)；} } GetResult()；请看下面的结果

当然，还有最后一点。为了处理异常，可以添加try catch

Async函数getResult () {console.log('我是getResult函数')尝试{让code=wait getCode()；console . log(code . data . code)；if(code . data . code==0){ var params={ code : code . data . code } let list=wait get list(params)；console . log(list . data . list)；} } catch(err){ console . log(err)；} } GetResult()；我个人认为在做vue项目的时候，如果没有对异常的特殊处理，可以不加try catch，因为打印出来的错误和vue自己报的一样，都是黑色字体，还不如醒目的红色呢！当然，如果你想专门处理错误，那就加上去

代码风格是不是简单多了，异步代码变成了同步代码。让我稍微谈谈后者的代码执行顺序

首先，添加async before函数，说明这个函数是一个异步函数。当然，async将与第一个请求wait一起使用

let code=wait GetCode()；Await的意思是等待，等待函数getCode()执行，获取值后赋给代码，然后用代码的值进行下一步操作，就这么简单！快点改代码！

关于JavaScript的更多信息，请参考本网站的主题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。