vue封装axios以及对api的接口的统一管理

前言

这里对vue axios网络请求做一个最基本的请求，内部包含了请求拦截/响应拦截/返回数据结构/全局错误提示等，同时也可以根据业务需求进行自身响应的扩展，比如全局loading/token国企高管跳转/多个请求实例等。

目录结构

src
  api
      common.js

   service
     src
         errorCode
      index.js

api管理

api/common.js

import  requerst from '@/service'

// 列表查询
export const getList = params => requerst({url: '/labels/list',method: 'get',params})

axios封装

service/src/errorCode.js

const errorCode  = {
  400: "请求参数错误",
  401: "用户未提供身份验证凭据，或者没有通过身份验证",
  403: "用户通过了身份验证，但是不具有访问资源所需的权限",
  404: "请求资源未找到",
  405: "用户已经通过身份验证，但是所用的 HTTP 方法不在他的权限之内",
  410: "所请求的资源已从这个地址转移，不再可用",
  415: "客户端要求的返回格式不支持。比如，API 只能返回 JSON 格式，但是客户端要求返回 XML 格式",
  500: "内部服务器错误",
  501: "服务器不支持该请求中使用的方法",
  502: "网关错误",
  503: "服务不可用;服务器无法处理请求，一般用于网站维护状态",
  504: "网关超时"
}

service/index.js

import axios from "axios";
import errorCode from './src/errorCode'

//请求头
let headers = {
  "Content-Type": "application/json;charset=UTF-8"
};

//创建axios实例
const service = axios.create({
  timeout: 12000,
  headers: headers,
  baseURL: process.env.VUE_APP_BASE_API
});

//错误码
const httpCode = headers

//请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

//响应拦截器
service.interceptors.response.use(
  function(response) {
    // 对响应数据做点什么
    if (response.status === 200) {
      return response.data;
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    // 对响应错误做点什么
    let message = "";
    try {
      message =
        error.response.status in httpCode
          ? httpCode[error.response.status]
          : error.response.data.message || "系统错误，请联系管理员";
          alert(message)
    } catch (e) {
      console.log('000000',e);
    }
    if (process.env.NODE_ENV == "dev") {
      console.log("%c*-------【错误日志】-------*", "color:red;font-size:16px");
      console.log("错误地址:", error.response.config.url);
      console.log("错误码:", error.response.status);
      console.log("错误提示:", message);
      console.log("%c*---------  END  ---------*", "color:red;font-size:16px");
    }

    return Promise.reject(error);
  }
);
export default service;

引入对应模块并调用

在需要调用接口的页面引入对应的api模块，并调用对应的方法就行了，举个例子

import * as commonApi from '@/api/common';

created () {
  this.getList()
},
methods: {
  commonApi.getList(this.queryParams).then(resp => {
    let { total, list } = resp.data
    this.dataList = list
    this.total = total
  })
}