上周五下午，我正准备下班。产品经理突然跑过来：“使用者反馈说提交订单后没反应，是不是又出 bug 了？”

我一查日志。发现接口报了错误，但页面上什么提示都没有。

原来是我写异步请求时忘了加try-catch。使用者点完提交就以为成功了结果订单根本没生成。

那一刻，我才意识到：async/await 的错误处理真的不能省。

简单async/await是处理异步操作的语法糖，让异步代码看起来像同步代码一样直观。

没有 async/await 的时代：

// 回调地狱
fetchData {
fetchMoreData {
fetchEvenMoreData {
// 更多嵌套...
})
})
})

// 同步般的写法
async function getData {
const result1 = await fetchData
const result2 = await fetchMoreData
const result3 = await fetchEvenMoreData
return result3
}

是不是清爽多了？怎么说呢，如果后的 Promise 出错。这个错误会直接抛出，如果不捕获，就会导致程序崩溃。

什么时候必须加 try-catch？

. 必须给使用者明确反馈的场景

举个例子这方面。使用者点击提交按钮，如果失败却没有任何提示，使用者会误以为成功，这体验极差！下面是一个完整示例:

• User 操作必须有反馈。
• 不同错误给出不同提示。说起来，
• 使用 finally 确保加载状态正确重置。

. 必须继续执行后续逻辑的场景

有时候，即使某个请求失败，我们仍然希望继续执行其他操作，例如页面初始化时分别拉取必需和非必需的数据：

async function initializePage {
// 获取使用者基本信息
try {
this.userInfo = await this.$http.get
} catch {
console.error
// 即使失败，也继续执行下面逻辑
}
// 获取使用者设置
try {
this.userSettings = await this.$http.get
} catch {
console.error
// 使用默认设置继续
this.userSettings = this.defaultSettings
}
// 获取推荐内容
try {
this.recommendations = await this.$http.get
} catch {
console.warn
}
}

. 有全局错误拦截器的情况

If your project has a global HTTP interceptor。many errors are already handled centrally:

// http.js – 全局拦截器
this.$http.interceptors.response.use(
response => response,error => {
if { // 未登录自动跳转登录页
router.push
} else if { // 服务端异常统一弹窗
Message.error
}
return Promise.reject
})
)
// 在组件里不用重复处理
async fetchData {
const data = await this.$http.get
this.list = data
}

. 错误需要向上抛出的情况

The idea is to let caller decide how to handle errors.

// api/user.js – 使用者相关 API 函数
export const userApi = {
async getUserProfile {
const response= await $http.get;return response.data
},async updateUserProfile{
const response= await $http.put;return response.data
}}
// 在组件里调用并自行处理
export default{
methods:{
async loadUserProfile{
try{
this.profile= await userApi.getUserProfile;}catch{
this.$message.error;}
}
}
}

让代码更简洁——封装 safeAsync 工具函数

You can reduce repetitive try/catch boilerplate by wrapping promises:

// utils/safeAsync.js
export function safeAsync{
return promise
.n // 成功：
.catch // 错误：
}

The usage looks cleaner:

import {safeAsync} from '@/utils/safeAsync'

async function loadUser{ const  = await safeAsync) if{ ElMessage.error return } user.value=data }

多个请求怎么办？先别用 Promise.all

Many people prefer:

// Danger!怎么说呢，one failure kills everything!const  = await Promise.all。getOrders])

But if getOrders fails,you lose getUser’s result!

js

const results = await Promise.allSettled,getOrders])

const user = results.status==='fulfilled'?results.value:null