我如何才能在承诺完成后才执行代码

Question

我的代码中的每件事都有效，问题是 this.loading=false 运行在 for() 完成发送所有请求之前。

如何让this.loading=false只在for()发送完所有请求后才执行？我希望你明白了。

methods:{
    fileChange(event){
        this.loading=true
        //code
        for(var i=0; i < tasks.length; i++){
            //code
            axios.post('/api/operation', data)
                .then(response=>{
                    this.operations.push(name:response.data.name});
                })
                
        }
        
        //i want to the bellow code to be executed after for() is finnished!
        this.loading=false
    },

},

Answer 1

使用async/await

methods: {
    async fileChange(event) {
      this.loading = true
      for (let i = 0; i < tasks.length; i++) {
        const {data} = await axios.post('/api/operation', data) // << whats data?
        
        this.operations.push({ name: data.name })
      }
      this.loading = false
    },
},

Answer 2

在所有请求发送之后，您的代码确实将 this.loading 设置为 false；您的意思是要在所有请求的所有响应都已 returned 之后设置它吗？希望我正确理解了你的问题。

在这种情况下，您可以使用 Promise.all() or Promise.allSettled()：它们每个都接受一个 Promises 的数组（例如，axios 请求）和 returns另一个 Promise 在数组中的所有承诺完成后用结果解析。

简单来说，它允许您将许多承诺合并为一个，只有在它们全部完成后才完成。

例如：

methods: {
  fileChange(event) {
    this.loading = true;

    // Send requests and store the Promises in an array.
    // Each promise resolves to the response's `response.data.name` field.
    const requestPromises = [];
    for (var i = 0; i < tasks.length; i++) {
      const promise = axios.post('/api/operation', data)
        .then(response => response.data.name);
      requestPromises.push(promise);
    }

    // Executed once all requests return a response
    Promise.all(requestPromises)
      .then(names => {
        // Push all operation names into operations
        this.operations.push(...names);
        this.loadaing = false;
      });
  }
},

（注意：您可以使用 Array.map() 和 async/await 使代码更加优雅）

Promise.all() 和 Promise.allSettled() 之间的区别是关于错误的处理 - Promise.all() 失败（拒绝）如果 any 的承诺传递给它失败，而 Promise.allSettled() 总是解析为一个对象数组，每个对象都包含有关操作是否成功及其关联值的数据。

编辑：在 for 循环中使用 await 会起作用，但效率非常低，因为您的代码将等待一个请求结束发送下一个；如果您有 50 个请求要发送，并且每个 return 大约需要 100 毫秒， 在 for 中使用 await 将需要 50 * 100 = 5000 毫秒，或 5 秒结束；使用 Promise.all/Promise.allSettled 将使该数字保持接近 100 毫秒，因为所有请求都是一起发送的。

我如何才能在承诺完成后才执行代码

How can i execute a code only after the promise is done

asynchronous

promise

async-await

vue.js

axios