vue中axios的二次简易封装

欢迎点击领取 -《前端面试题进阶指南》：前端登顶之巅-最全面的前端知识点梳理总结

第一步：配置axios

首先，创建一个request.js，这里面存放的时axios的配置以及拦截器等，最后导出一个axios对象。这里你也可以使用自己的UI库（本文章使用的是element-ui）。

util/request.js 文件

import Vue from 'vue';
import axios from 'axios'
import router from '@/router/router.js'
import Cookies from "js-cookie";

const that = new Vue();
const h = that.$createElement;

function stringfiy(url) {
  if (!url) return false;
  return Object.entries(url)
    .map(item => `${item[0]}=${item[1]}`)
    .join("&");
}

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

// create an axios instance
const service = axios.create({
  baseURL: `//${location.hostname}/api/api-prefix`,
  timeout: 15000,
  withCredentials: true, // 允许跨域 cookie
})

// 添加一个请求拦截器
service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些事
    if (Cookies.get('user-token')) {
      config.headers.Authorization = Cookies.get('user-token') // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// 再添加一个返回拦截器
service.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    if (error.response && CODE_MESSAGE[error.response.status]) {
      that.$notify.error({
        title: `请求错误 ${error.response.status}`,
        message: h('div', [
          h('div', CODE_MESSAGE[error.response.status]),
          h('div', error.response.config.url),
        ]),
      });
    } else {
      that.$message.error("系统开小差啦，请联系技术小哥哥哦~")
    }
    return Promise.reject(error)
  }
)

/**
 * @param {string} url 请求url地址
 * @param {object} params 请求携带参数
 * @param {string} method 请求方式
 * @param {object} option status: 判断返回状态的值, messageText: 成功信息提示, messageErr: 失败信息提示
 * @description 请求信息封装使用
 */
const request = async (url, params, method = 'get', option = {}) => {
  const { status, messageText, messageErr } = option || {};
  const data = await service[method](method === 'get' ? (url + '?' + stringify(params)) : url, params);
  // 根据后端定义的去写
  if (status === 'response' && data.status === '1') return data;  // 获取所有数据并且是成功的状态
  if (status === 'status') return getStatusData(data, messageText, messageErr) // 处理弹框status的信息
  if (data.status === '1') return data.data // 默认只返回数据data
  if (data.code === 100052 && data.success === false) return router.push({ path: '/reject/index' }); // 无权限，重定向到401页面
}

const getStatusData = (data, messageText, messageErr) => {
  if (data.status === '1') {
    messageText !== 'isShow' ? that.$message({
      type: 'success',
      showClose: true,
      message: messageText || OPERATION_SUCCESS,
    }) : null;
    return data.data;
  } else {
    that.$message({
      type: 'error',
      showClose: true,
      message: (messageErr || OPERATION_ERROR) + '，' + data.message
    });
    return data.data;
  }
}

export {
  request
}

第二步：使用

// api 统一管理文件
const api = {
	list: () => '/manager/getConfigsByProductId', // 获取列表信息
}

const getDataList = (params = {}) => request(api.list(), params, 'post', 'response');

export default {
	getDataList
}

// vue 当前单页面
import api from '@/api/api.js'

const method = {
	// 获取列表信息内容
	async getDataList() {
		const res = await api.getDataList({ current: 1, pageSize: 20 })
		this.datalist = (res && res.data) || []
		this.dataTotal = (res && res.total) || 0
	}
}