import axios from "axios";
import { Notify } from 'vant';  // 这个是异常提醒弹框. vant或者ele的,在或者其他的
import router from '@/router';  // 做跳转

//下面三个是错误处理.  底下的拦截判断出异常. 这里通过 errorCreate new一个Error, 然后在使用 errorLog 打印出来在页面提示一下.  可以直接写成提示的
function errorCreate(msg) {
    const error = new Error(msg)
    errorLog(msg)

    throw error
}

// 记录和显示错误  
function errorLog(error) {
    // 显示提示
    Notify({
        message: error + '',
        type: 'danger',
        duration: 5 * 1000
    })
}

const service = axios.create({
    baseURL: 'http://192.168.3.25:17895/api',
    timeout: 50000 // 请求超时时间
})


// 请求拦截 
service.interceptors.request.use(config => {
    let token = localStorage.getItem('token')
    config.headers.authorization = `Bearer ${token}`;
    return config;
});

/// 响应拦截器
service.interceptors.response.use(
    response => {
        // dataAxios 是 axios 返回数据中的 data
        const dataAxios = response.data
        // 这个状态码是和后端约定的
        const { code } = dataAxios
        // 根据 code 进行判断
        if (code === undefined) {
            return dataAxios
        } else {
            // 有 code 代表这是一个后端接口 可以进行进一步的判断  列举几个格式意思意思
            switch (code) {
                case 200:
                    return dataAxios.data
                case 400:
                    errorCreate(`${dataAxios.msg}`)
                    break
                case 401:
                    errorCreate(`${dataAxios.msg}`)
                    break
                case 2001:
                    // 登录成功 
                    localStorage.setItem('token', dataAxios.token);
                    localStorage.setItem('userInfo', JSON.stringify(dataAxios.userInfo));
                    router.push('/')
                    return true
                case 2002:
                    // 未登录
                    localStorage.removeItem('token')
                    router.push('/login')
                    errorCreate(`${dataAxios.msg}`)
                    break
                case 4001:
                    // 文章 没有
                    errorCreate(`${dataAxios.msg}`)
                    break
                case 4002:
                    // 未实名认证
                    errorCreate(`${dataAxios.msg}`)
                    router.push('/verified')
                    break
                case 4003:
                    // 无数据 跳转
                    router.push('/')
                    break
                default:
                    // 不是正确的 code
                    errorCreate(`${dataAxios.msg}`)
                    break
            }
        }
    },
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '请求错误';
                    break
                case 401:
                    error.message = '未授权，请登录';
                    break
                case 403:
                    error.message = '拒绝访问';
                    break
                case 404:
                    error.message = `请求地址出错`;
                    break
                case 408:
                    error.message = '请求超时';
                    break
                case 500:
                    error.message = '服务器内部错误';
                    break
                case 501:
                    error.message = '服务未实现';
                    break
                case 502:
                    error.message = '网关错误';
                    break
                case 503:
                    error.message = '服务不可用';
                    break
                case 504:
                    error.message = '网关超时';
                    break
                case 505:
                    error.message = 'HTTP版本不受支持';
                    break
                default:
                    break
            }
        }
        errorLog(error)
        return Promise.reject(error)
    }
)


export default service

使用

import request from '@/plugin/axios.js'


export function Login(data) {
    return request({
        url: `/login`,
        method: 'post',
        data
    })
}

-----------------------------------

import { Login } from "@/api/user";

 onSubmit() {
      this.loading = true;
      Login(this.formData)
        .then((res) => {
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },