vue axios 接口请求封装优化

vue axios 接口请求封装

主要区别是增加xhr.js 管理接口

一、封装文件 src/utils/request.js 

import axios from "axios";
import { getToken } from "@u/auth";
 
/**
 * 创建 axios 实例
 */
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量base接口地址 url = base url + request url
  withCredentials: true, // 跨域请求时发送Cookie
  timeout: 60000, // 请求超时
  headers: {
    "Content-Type": "application/json;q=1.0,*/*;q=0.1",
  },
});
 
/**
 * 全局 请求拦截器, 支持添加多个拦截器
 * 例如: 配置token、添加一些默认的参数
 * `return config` 继续发送请求
 */
service.interceptors.request.use(
  (config) => {
    // 设置Token
    getToken() && (config.headers["X-Token"] = getToken());
 
    return config;
  },
  (error) => {
    // 做一些请求错误
    console.error(error);
    return Promise.reject(error);
  }
);
 
/**
 * 全局 响应拦截器, 支持添加多个拦截器
 * 例如: 根据状态码选择性拦截、过滤转换数据
 * @param {Object} res 请求返回的数据
 * @return {Promise<reject>}
 */
service.interceptors.response.use(
  async (res) => {
    const { data, status } = res;
 
    try {
      return await handleCode({ data, status});
    } catch (err) {
      return Promise.reject(err);
    }
  },
  (err) => {
    return Promise.reject(err);
  }
);
 
/**
 * 处理 HTTP 状态码
 * @param data {Object} 请求返回的数据
 * @param status {String} HTTP状态码
 * @param rHeader {Object} 响应头
 * @returns {Promise<never>|*}
 */
function handleCode({ data, status}) {
  const STATUS = {
    "200"() {
      return data;
    },
    "400"() {
      return Promise.reject(new Error("请求错误"));
    },
    "401"() {
      return Promise.reject(new Error("请求未授权"));
    },
    "403"() {
      return Promise.reject(new Error("拒绝请求"));
    },
    "500"() {
      return Promise.reject(new Error("服务器错误"));
    },
  };
  // 有状态码但不在这个封装的配置里，就直接返回错误
  return STATUS[status]
    ? STATUS[status]()
    : Promise.reject(new Error(data.data || "请求错误"));
}

export { service as axios };

二、管理接口文件 src/utils/xhr.js

import { axios } from "@u/request";

/**
 * get 请求方式
 * @param url {String} 接口地址
 * @param params {Object} 接口参数
 * @returns {AxiosPromise}
 * @constructor
 */
export function mGet(url, params) {
  return axios({
    url: url,
    method: "get",
    params,
  });
}

/**
 * post 请求方式
 * @param url {String} 接口地址
 * @param data {Object} 接口参数
 * @returns {AxiosPromise}
 * @constructor
 */
export function mPost(url, data) {
  return axios({
    url: url,
    method: "post",
    data,
  });
}

/**
 * put 请求方式-用于修改全部数据
 * @param url {String} 接口地址
 * @param data {Object} 接口参数
 * @returns {AxiosPromise}
 * @constructor
 */
export function mPut(url, data) {
  return axios({
    url: url,
    method: "put",
    data,
  });
}

/**
 * patch 请求方式-用于修改单项或多项数据
 * @param url {String} 接口地址
 * @param data {Object} 接口参数
 * @returns {AxiosPromise}
 * @constructor
 */
export function mPatch(url, data) {
  return axios({
    url: url,
    method: "patch",
    data,
  });
}

/**
 * delete 请求方式
 * @param url {String} 接口地址
 * @param params {Object} 接口参数
 * @returns {AxiosPromise}
 */
export function mDelete(url, params) {
  return axios({
    url: url,
    method: "delete",
    params,
  });
}

/**
 * 下载文件
 * @param url {String} 接口地址
 * @param params {Object} 接口参数
 * @returns {AxiosPromise}
 * @constructor
 */
export function mDownload(url, params) {
  return axios({
    url: url,
    method: "get",
    params,
    responseType: "blob",
  });
}

/**
 * 上传文件
 * @param url {String} 接口地址
 * @param data {Object} 接口参数
 * @returns {AxiosPromise}
 */
export function mUpload(url, data) {
  return axios({
    url: url,
    method: "post",
    data,
    headers: {
      "Content-Type": "multipart/form-data",
    },
    timeout: 1000 * 60 * 4,
  });
}

三、接口文件 src/api/user.js

import { mGet } from "@u/xhr";

const getUserInfo = (params) => mGet("/user/info", params);

export { getUserInfo };

四、使用示例

<template>
  <div class="app-container"></div>
</template>
 
<script>
import { getUserInfo } from "@i/user";
 
export default {
  name: "Users",
  components: {},
  data() {
    return {
      list: []
    };
  },
  created() {
    getUserInfo({ id: 1 }).then((res) => {
      this.list = res.data;
    });
  },
  methods: {},
};
</script>