vue中async await请求处理

最新推荐文章于 2024-07-08 16:40:47 发布

小皇帝web前端

最新推荐文章于 2024-07-08 16:40:47 发布

阅读量6.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_39464969/article/details/105483222

版权

本文介绍了在Vue中使用async/await进行异步请求的实践，特别是在处理多个接口依赖顺序的问题上，如何确保数据获取的正确顺序，避免出现接口响应速度导致的数据混乱。

摘要由CSDN通过智能技术生成

Promise.all() 用法示例：

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
const PA = Promise.all([wait(3000), wait(1000), wait(2000)])
// 依次打印：wait 1000ms wait 2000ms wait 3000ms

async-await 同时触发多个异步操作示例

const wait = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(`wait ${ms}ms`)
        resolve()
    }, ms)
})
;(async () => {
    await Promise.all([wait(3000), wait(1000), wait(2000)])
    // 依次打印：wait 1000ms wait 2000ms wait 3000ms
})()

问题：接口B需要接口A返回的数据，如果同时请求，控制不了返回速度，会出现B快于A，

实现：

async表示函数里有异步操作，

await表示紧跟在后面的表达式需要等待结果。