axios

向军大叔每晚八点在 抖音 和 bilibli 直播

安装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。使用下面命令在项目中安装。

yarn add axios
或
npm install axios

配置

下面是在 vue 项目中的配置，包含以下设置

• 请求时显示加载动画
• 携带 token
• 表单验证错误错误记录到 vuex
• 无权限（401）时跳转到登录界面

import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { ElMessage, ElLoading } from 'element-plus'

const instance = axios.create({
    headers: {
        'Content-Type': 'application/json',
    },
})

//加载动画
let loading = null

instance.interceptors.request.use(
    function (config) {
        const baseUrl = import.meta.env.MODE == 'development' ? 'http://houdunren.test/api' : '/'
        config.baseURL = baseUrl

        //携带令牌
        const token = window.localStorage.getItem('token')
        if (token) config.headers.Authorization = `Bearer ${token}`
        //加载动画
        loading = ElLoading.service({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(255, 255, 255, 0)',
        })
        return config
    },
    function (error) {
        return Promise.reject(error)
    }
)

instance.interceptors.response.use(
    function (response) {
        loading.close()
        const { data } = response
        if (data.message) {
            ElMessage.success({
                message: data.message,
                type: 'success',
            })
        }

        return data
    },
    function (error) {
        loading.close()
        const { status, data } = error.response

        switch (status) {
            case 422:
                //表单验证失败
                store.commit('error/set', data.errors)
                break
            case 401:
                store.commit('user/logout')
                router.push('/login')
                break
        }

        return Promise.reject(error)
    }
)

export default instance