vue中用async/await 来处理异步

太过爱你忘了你带给我的痛 2022-02-28 15:54 250阅读 0赞

用async/ await来发送异步请求，从服务端获取数据，等待获取数据，然后处理数据。

methods: {
        async generateData (){
           let _result = await getProductslist() 
           this.datalist  = _result.data
           let _arr = this.datalist.slice(e, 1) 
           this.concatlist= _arr.concat(this.datalist)
        }
    }
    // 等待getProductslist() 方法执行后返回数据给_result，然后再对返回的数据做更多的操作。

![Image 1][]

QQ图片20180724153214.png

resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。  
// 如果async 函数中有返回一个值 ,当调用该函数时，内部会调用Promise.resolve() 方法把它转化成一个promise 对象作为返回。this.promis().then((res) => \{console.log(res)\}),这其中的res就是返回的promise对象。

![Image 1][]

QQ图片20180724170240.png

其中的settime可以理解为是一个异步请求。例如vue中封装好的axios其实像是对jq中用$ajax的再次封装。  
可以对比两段代码：

![Image 1][]

QQ图片20180724160210.png

![Image 1][]

QQ图片20180724160403.png

axios.post(url,data,).then((res) =>\{\}).then((data) => \{\}).catch((err) => \{\}) //这个就是vue中的axios的用法，是不是跟promise封装jq的ajax的方法很相似！！

promise：  
Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大。  
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件 (通常是一个异步操作)的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。

作者：zx一个胖子  
链接：https://www.jianshu.com/p/399b25d43313  
来源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[Image 1]: