在 Vue.js 中使用异步请求时，有时候会出现 Unhandled promise rejection 的警告，这是因为在异步请求中没有正确地处理错误情况，导致 Promise 被拒绝而没有被捕获。这篇文章将介绍这个问题的解决方法，并提供示例代码。
问题分析
在 Vue.js 中，我们通常使用 axios 或者 fetch 等库进行异步请求。在这些请求中，我们会使用 Promise 对象来处理请求成功和失败的情况。例如：
axios.get('/api/user/1')
.then(response => {
// 处理请求成功的情况
})
.catch(error => {
// 处理请求失败的情况
})这里的 then 方法和 catch 方法都返回了一个 Promise 对象，我们可以通过链式调用来处理请求成功和失败的情况。但是，如果我们在请求中没有正确地处理错误情况，例如：
axios.get('/api/user/1')
.then(response => {
// 处理请求成功的情况
})这时，如果请求失败了，Promise 对象就会被拒绝，但是没有被捕获，就会出现 Unhandled promise rejection 的警告。
解决方法
为了解决这个问题，我们需要在 Promise 链中添加一个 catch 方法，来处理 Promise 被拒绝的情况。例如：
axios.get('/api/user/1')
.then(response => {
// 处理请求成功的情况
})
.catch(error => {
// 处理请求失败的情况
})这样，无论请求成功还是失败，Promise 对象都会被正确地处理，不会出现 Unhandled promise rejection 的警告。
另外，为了避免重复的错误处理代码，我们可以在全局添加一个错误处理器，来处理所有的 Promise 被拒绝的情况。例如：
window.addEventListener('unhandledrejection', event => {
console.warn('Unhandled promise rejection:', event.reason);
});这样，当任何一个 Promise 被拒绝时，都会触发这个错误处理器，我们就可以在这里统一地处理错误情况。
示例代码
下面是一个完整的示例代码，演示了如何使用 axios 库进行异步请求，并正确地处理错误情况，避免 Unhandled promise rejection 的警告。
-- -------------------- ---- -------
-- ---------
--------------------------------------------- ----- -- -
----------------------- ------- ------------ --------------
---
-- ------
------------------------
-------------- -- -
-------------------- ---------------
--
------------ -- -
---------------------- -------
---总结
在 Vue.js 中使用异步请求时，一定要正确地处理错误情况，避免出现 Unhandled promise rejection 的警告。我们可以在 Promise 链中添加一个 catch 方法，来处理 Promise 被拒绝的情况；也可以在全局添加一个错误处理器，来统一地处理所有的 Promise 被拒绝的情况。通过这些方法，我们可以更好地使用异步请求，并提高应用的稳定性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650fc61395b1f8cacd87568b