我删光了项目里的 try-catch，老板：6

置顶

精

活动

相信我们经常这样写bug（不是 👇：

try {
  const res = await api.getUser()
  console.log('✅ 用户信息', res)
} catch (err) {
  console.error('❌ 请求失败', err)
}

看似没问题

• 每个接口都要 try-catch，太啰嗦了！
• 错误处理逻辑分散，不可控！
• 代码又臭又长💨！

💡 目标：不抛异常的安全请求封装

我们希望实现这样的调用👇：

const [err, data] = await safeRequest(api.getUser(1))
if (err) return showError(err)
console.log('✅ 用户信息：', data)

是不是清爽多了？✨

没有 try-catch，却能同时拿到错误和数据。

🧩 实现步骤

1️⃣ 先封装 Axios 实例

// src/utils/request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
})

// 🧱 请求拦截器
service.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token')
    if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  (error) => Promise.reject(error)
)

// 🧱 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code !== 0) {
      ElMessage.error(res.message || '请求失败')
      return Promise.reject(new Error(res.message || '请求失败'))
    }
    return res.data
  },
  (error) => {
    ElMessage.error(error.message || '网络错误')
    return Promise.reject(error)
  }
)

export default service

拦截器的作用：

• ✅ 统一处理 token；
• ✅ 统一处理错误提示；
• ✅ 保证业务层拿到的永远是“干净的数据”。

2️⃣ 封装一个「安全请求函数」

// src/utils/safeRequest.js
export async function safeRequest(promise) {
  try {
    const data = await promise
    return [null, data] // ✅ 成功时返回 [null, data]
  } catch (err) {
    return [err, null] // ❌ 失败时返回 [err, null]
  }
}

这就是关键！

它让所有 Promise 都变得「温柔」——不再抛出异常，而是返回结构化结果。

3️⃣ 封装 API 模块

// src/api/user.js
import request from '@/utils/request'

export const userApi = {
  getUser(id) {
    return request.get(`/user/${id}`)
  },
  updateUser(data) {
    return request.put('/user', data)
  },
}

4️⃣ 在业务层优雅调用

是不是很优雅、数据逻辑清晰、不需要 try-catch、 错误不崩溃。

老板说：牛🍺，你小子有点东西

逼班

技术大厂，前端-后端-测试，新一线和一二线城市等地均有坑位，感兴趣可以试试。待遇和稳定性都不错~

🧱 我们还可以进一步优化：实现自动错误提示

我们可以给 safeRequest 增加一个选项，让错误自动提示：

// src/utils/safeRequest.js
import { ElMessage } from 'element-plus'

export async function safeRequest(promise, { showError = true } = {}) {
  try {
    const data = await promise
    return [null, data]
  } catch (err) {
    if (showError) {
      ElMessage.error(err.message || '请求失败')
    }
    return [err, null]
  }
}

使用时👇：

const [err, data] = await safeRequest(userApi.getUser(1), { showError: false })

这样你可以灵活控制是否弹出错误提示，

比如某些静默请求就可以关闭提示。

🧠 进阶：TypeScript 支持（超丝滑）

如果你用的是 TypeScript，可以让返回类型更智能👇：

export async function safeRequest(
  promise: Promise
  
): Promise<[Error | null, T | null]> {
  try {
    const data = await promise
    return [null, data]
  } catch (err) {
    return [err as Error, null]
  }
}

  
 

调用时：

const [err, user] = await safeRequest(userApi.getUser(1))
if (user) console.log(user.name) // ✅ 自动提示类型

 

老板：写得很好，下次多写点，明天你来当老板

——转载自：前端九哥