Vue3 中如何将 Axios 拦截器封装为 request 文件

在 Vue3 项目开发中，使用 Axios 进行网络请求是非常常见的操作。为了提高代码的可维护性和复用性，将 Axios 拦截器封装为一个独立的 request 文件是一个不错的选择。

需要安装 Axios。在项目目录下打开命令行，执行 npm install axios 或 yarn add axios 来安装 Axios 依赖。

安装完成后，在项目的 src 目录下创建一个名为 request.js 的文件。在这个文件里，我们首先要引入 Axios。

import axios from 'axios'

接下来，创建一个 Axios 实例，设置一些基础配置，比如请求的基准 URL 等。

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 5000
})

这里的 process.env.VUE_APP_BASE_API 是项目的环境变量，可以在 .env 文件中进行设置。

然后，我们来添加请求拦截器。请求拦截器可以在请求发送前对请求进行一些处理，比如添加 Token 等。

service.interceptors.request.use(
    config => {
        const token = localStorage.getItem('token')
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

在上述代码中，我们从 localStorage 中获取 Token，并添加到请求头中。

接着添加响应拦截器。响应拦截器可以在接收到响应后对响应进行处理，比如错误处理等。

service.interceptors.response.use(
    response => {
        const res = response.data
        if (res.code!== 200) {
            console.error('请求出错:', res.message)
            return Promise.reject(new Error(res.message))
        } else {
            return res
        }
    },
    error => {
        console.error('网络错误:', error.message)
        return Promise.reject(error)
    }
)

最后，将这个 Axios 实例导出，以便在其他组件中使用。

export default service

在组件中使用时，只需要引入这个 request.js 文件即可。

import request from './request'

request.get('/api/data').then(response => {
    console.log(response)
}).catch(error => {
    console.error(error)
})

通过以上步骤，我们成功地将 Axios 拦截器封装为了 request.js 文件，使得项目中的网络请求代码更加简洁和易于维护。