在前端开发中，异步请求是一个非常常见的操作。而 Promise 作为一种处理异步操作的模式，可以极大地简化编码的复杂度和提高代码的可维护性。在 Vue.js 中，使用 Promise 处理异步请求也是一种很好的实践。
Promise 简介
Promise 是 JavaScript 中最重要的异步编程解决方案之一。它是一种处理异步操作的编程模式，可以规范异步操作的状态和结果，解决了回调地狱和异常处理的问题。
Promise 有三种状态：未完成（pending）、已完成（fulfilled）和已拒绝（rejected）。当一个 Promise 状态为未完成时，可以使用 then 方法注册回调函数；当状态为已完成时，会调用成功的回调函数；当状态为已拒绝时，会调用失败的回调函数。
在 Vue.js 中，一般使用 axios 库或者 fetch API 来进行异步请求。这两者都是基于 Promise 的封装，可以直接返回 Promise 对象。因此，我们可以利用 Promise 的特性来进行异步请求处理。
在 Vue.js 中使用 Promise 处理异步请求
在 Vue.js 中，我们可以在组件的 methods 中定义异步请求函数，并利用 Promise 来处理结果。
首先，我们需要在组件中引入 axios 库（或者使用 Vue.js 自带的 Axios 插件，引用方式相同）。
import axios from 'axios'
然后，我们可以定义一个异步请求函数：
methods: { fetchData () { return axios.get('/api/data') } }
这个函数会返回一个 Promise 对象。我们可以在组件的生命周期函数中调用这个函数并处理结果：
created () { this.fetchData().then(res => { console.log(res.data) }).catch(err => { console.log(err) }) }
当接收到异步请求成功的数据时，将数据打印到控制台；当异步请求出错时，将错误信息打印到控制台。
Promise 嵌套
在异步请求过程中，我们可能需要发起多个异步请求才能得到最终的结果。这时，我们可以使用 Promise 嵌套来处理。
以两个异步请求为例，第二个请求需要使用第一个请求的结果：
-- -------------------- ---- ------- -------- - -------------- -- - ------ ---------------------------- -- --------------- -- - ------ ------------------------------ -- - ------ ----------------------------- - ------- - ----- -------- - -- -- - -展开代码
在这个例子中，我们定义了两个异步请求函数。fetchSecondData 函数会先调用 fetchFirstData 函数，然后使用第一个请求的结果来发起第二个请求。这里使用了 Promise 的 then 方法嵌套，在第一个请求成功后回调第二个请求。
同样地，我们可以在组件的生命周期函数中调用这个函数并处理结果：
created () { this.fetchSecondData().then(res => { console.log(res.data) }).catch(err => { console.log(err) }) }
Promise.all
在某些场景下，我们需要一次性发起多个异步请求，并等待它们全部完成后再进行下一步操作。这时，我们可以使用 Promise.all 方法。
以三个异步请求为例：
-- -------------------- ---- ------- -------- - -------------- -- - ------ ---------------------------- -- --------------- -- - ------ ----------------------------- -- -------------- -- - ------ ---------------------------- - -展开代码
我们可以使用 Promise.all 方法来一次性发起这三个异步请求：
-- -------------------- ---- ------- ------- -- - ----------------------------------- ----------------------- ------------------------------------ -- - ---------------------------- ---------------------------- ---------------------------- ------------ -- - ---------------- -- -展开代码
这里使用了 Promise.all 方法，将三个异步请求组成一个数组传递给该方法。当所有异步请求都成功时，Promise.all 将会返回一个包含所有结果的数组。我们可以使用数组的下标来获取对应异步请求的结果。
结语
使用 Promise 来处理异步请求可以极大地提高代码的可维护性和复用性。而在 Vue.js 中，利用 Promise 来进行异步请求处理也是一种很好的实践。我们可以在组件的 methods 中定义异步请求函数，并利用 Promise 来处理结果。在多个异步请求嵌套的场景下，我们可以使用 Promise 嵌套来处理；在多个异步请求并行的场景下，我们可以使用 Promise.all 方法来处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c92770e46428fe9e03a179
