axios同步请求--

最新推荐文章于 2025-05-18 12:34:13 发布

原创最新推荐文章于 2025-05-18 12:34:13 发布 · 4.4w 阅读

24 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中使用async/await实现Axios的同步请求，包括封装请求函数和处理响应的方法，并展示了在实际页面操作中的应用案例。

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

一般使用axios进行数据请求就是要使用异步请求，因为项目需求，需要同步请求，所以async+await了解一下:
async用于声明一个函数是异步的，await用于声明在一个异步函数中等待语句执行完毕。也就是说await只能在async函数中使用
基本用法就是这样的：

methods: {
    async funA(){
        var res =  await axios.post('') //这里的res就是axios请求回来的结果
    }
}

我这边是用在项目里的
common.js

async addImg(file, config) {
    return await axios.post(path.addImage, file, config);
  }

vue页面

methods:{
async upload() {
      var self = this;
      var formData;
      for (let i = 0; i < this.imgList.length; i++) {
        const img = this.imgList[i];
        formData = new FormData();
        formData.append("file", img);
        formData.append("type", "goods_grade");
        console.log(formData.getAll("file"));
        await this.$api.common
          .addImg(formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "添加成功"
              });
              this.uploadSuccess = true;
              this.childrenImgs.push(res.data.result);
              this.$emit("change", this.childrenImgs);
            } else {
              this.$message({
                type: "warning",
                message: res.data.message
              });
            }
          });
      }
    }
}

注意事项
如果同步请求是封装在其他函数中，那么每一个函数都需要做成异步函数。如下所示

methods: {
  fun1: async function () {
    await axios.get('url)
  },
  fun2: async function () {
    ...
    await this.fun1()
    ...
  },
  fun3: async function () {
    ...
    await this.fun2()
    ...
  },
}