veu axios 中 async await的两种使用方法

最新推荐文章于 2023-07-21 13:11:59 发布

湖深似海

最新推荐文章于 2023-07-21 13:11:59 发布

阅读量378

点赞数

分类专栏： axios vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45944856/article/details/115690519

版权

vue 同时被 2 个专栏收录

11 篇文章

订阅专栏

axios

2 篇文章

订阅专栏

本文通过对比未使用与使用async/await的异步请求代码，展示了如何通过async/await来简化JavaScript中的并发控制，使得请求处理更加有序，避免回调地狱。在使用async/await后，请求的前后顺序更加清晰，代码可读性显著提升，有助于提高开发效率和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：有效使用async await 会少很多问题

0. 未使用async await前

代码：

feach() {
console.log('我是请求前：' + new Date().toLocaleTimeString())
        this.$get(this.path, {
          ...params
        }).then(r => {
          console.log('我是请求结束中：' + new Date().toLocaleTimeString())
        })
        console.log('我是请求后：' + new Date().toLocaleTimeString())
}

控制台：

1.使用后（1 ）

代码：

 async feach(params = {}) {
        console.log('我是请求前：' + new Date().toLocaleTimeString())
        await this.$get(this.path, {
          ...params
        }).then(r => {
          console.log('我是请求结束中：' + new Date().toLocaleTimeString())
        })
        console.log('我是请求后：' + new Date().toLocaleTimeString())
    },

控制台：

1.使用后（2 ）

代码：

async feach(params = {}) {
        console.log('我是请求前：' + new Date().toLocaleTimeString())
        const arr = await this.$get(this.path, { ...params })
        console.log('我是结束后：' + arr + new Date().toLocaleTimeString())
    },

控制台：