axios简易封装

.env.development

VUE_APP_URL="https://mock.yonyoucloud.com/mock/7509/laoke"

代码效果演示

• 简化封装，中心思想， 所有的错误统一处理即 return Promise.reject()，单独处理成功的即return Promise.resolve(),

import axios from 'axios';

// 请求取消
const CancelToken = axios.CancelToken;
let cancelBack = null;

// 实例化
const instance = axios.create({
  baseURL: process.env.VUE_APP_URL, // 公共地址
  timeout: 6000, // 超时
  cancelToken: new axios.CancelToken(cacel=>{
  		cancelBack = cancel;
	}), // 取消请求
});
// 什么情况下，取消请求逻辑 就直接调用 cancelBack()

// 请求拦截
instance.interceptors.request.use((config) => {
    // 添加请求头 todo。。。
   // 添加请求loading， todo 保证loading是单例的(可以一上来就先销毁loading， 接着在开始loading)
    return config;
});

// 服务器状态码状态提示
const statusMsg = {
    200: "服务器成功返回请求的数据。",
    201: "新建或修改数据成功。",
    202: "一个请求已经进入后台排队（异步任务）。",
    204: "删除数据成功。",
    400: "发出的请求方式错误，服务器没有进行新建或修改数据的操作。",
    401: "用户没有权限（令牌、用户名、密码错误）。",
    403: "用户得到授权，但是访问是被禁止的。",
    404: "发出的请求路径在服务器不存在",
    405: "请求方法不被允许。",
    406: "请求的格式不可得。",
    410: "请求的资源被永久删除，且不会再得到的。",
    413: "服务器限制了上传文件的大小",
    422: "当创建一个对象时，发生一个验证错误。",
    500: "服务器发生错误，请检查服务器。",
    502: "网关错误。",
    503: "服务不可用，服务器暂时过载或维护。",
    504: "网关超时。"
};

// 请求成功处理函数
const successHandler = ({ code, data, msg }) => {
    // 如果msg有值，就弹出来这个提示 todo... 
    // msg && console.log(msg);
    // 这个是对后台接口 返回的 状态码 进行单独处理， 比如编辑，删除成功， token 过期啊，等等
    switch (code) {
        case 200:
            return Promise.resolve(data);
        case 203:
            return rejectHandler(data);
        case 403:
            // 过期 token
            return rejectHandler(data);
        default:
            break;
    }
};

// Promise.reject 失败
const rejectHandler = (info) => Promise.reject(info);

// 请求失败处理函数
const errorHandler = ({ status, data, config }) => {
    // 提示框 todo...

    return rejectHandler(statusMsg[status]);
};

instance.interceptors.response.use(
    (res) => {
    	// 别将成功还是失败，先关闭loading todo...
        return res.status === 200
            ? successHandler(res.data)
            : errorHandler(res);
    },
    (err) => {
        // 失败了，先关闭loading todo...
        // 可以在这单独处理超时问题，网络不通等问题
        // 逻辑。。。。todo
        return rejectHandler(err.toString());
    }
);
export default instance;

可以在抽象一层 service文件夹

import request from '@/utils/request';
export const bannerRequest = (params) => request({
    url: '/banner',
    params,
  });

组件中调用

import { getUser } from '@/service';
export default {
  mounted() {
    getUser().then((res) => {
     // 这里，只有接口成功了，才会看到值， 失败进行了统一处理
      console.log(res);
    });
  },
};