记vue中封装axios

Posted 2021-02-09 砌墙的一块砖

文件结构：

 

mocks：中是本地json数据

adapter.js: 调用本地数据方法

resources.js 接口统一管理

export default {
    fetchDict: { url: \'/v1/system/fetchDcType\', method: \'post\' }
}

 

重点是以下俩个文件

index.js 拦截器以及请求头设置，并添加实例属性

import Vue from \'vue\';
import axios from \'axios\';
import { Toast } from \'vant\';
import { TOKEN_KEY } from \'../config\';
import store from \'../store/\';
import resources from \'./resources\';
import generateApiMap from \'./apiUtil\';

axios.defaults.headers.post[\'Content-Type\'] = \'application/x-www-form-urlencoded\';
axios.defaults.headers.common[TOKEN_KEY] = store.state.token;
axios.defaults.xsrfHeaderName = TOKEN_KEY;

const errCheck = (code, message) => {
  if (code === 1003) {
    Toast(\'TOKEN请求失败！\');
  } else if (code) {
    Toast(`${message}`);
  }
};
// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送请求之前做些什么
  if (!config.headers[TOKEN_KEY] && store.state.token) {
    axios.defaults.headers.common[TOKEN_KEY] = store.state.token;
    config.headers[TOKEN_KEY] = store.state.token;
  }
  return config;
}, error => Promise.reject(error));

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  if (response.config.showError !== false) {
    errCheck(response.data.code, response.data.msg);
  }
  if (response.data.code === 0) {
    return response;
  }
  return Promise.reject(response);
}, error => Promise.reject(error));


Vue.prototype.$http = axios;
Vue.Api = generateApiMap(resources);
Vue.prototype.$api = Vue.Api;

 

apiUtil.js

import axios from \'axios\';
import { isObject } from \'../shared/util\';

const replaceUrl = (url, params) => url.replace(/:[a-zA-Z0-9]*/g, (v) => {
  // url.replace(/:[a-zA-Z0-9]*/g 是匹配‘:之后的英文数字字段’
  // slice返回一个新的数组 从第一个返回 也就是去除调 :
  const key = v.slice(1);
  // 将params对象转为数组
  const newUrl = params[key];
  delete params[key];
  // 返回数组
  return newUrl;
});

// 创建axios实例
const sendApiInstance = (method, url, params, config = {}) => {
  if (!url) return null;
  const dataParams = Object.assign({}, params);
  const URI = replaceUrl(url, dataParams);
  let data = {};
  if (isObject(dataParams)) {
    data = dataParams;
  }
  // 判断请求方式返回不同方法
  return [\'post\', \'put\', \'patch\'].indexOf(method) > -1 ? axios[method](URI, data, config) : axios[method](URI, Object.assign(config, { params: data }));
};

// 遍历resources将其中每个对象转换为方法
const toMethod = (options) => {
  // 判断每一项的method 如果有就等于当前的，没有设置为get
  options.method = options.method || \'get\';
  return (
    params = {},
    config = {},
  ) => sendApiInstance(options.method, options.url, Object.assign(params), config);
  // return自身的arguments赋值给params

  // es5写法
  // return function () {
  //   var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  //   var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  //   const dataParams = Object.assign({}, params);
  //   return sendApiInstance(options.method, options.url, Object.assign(params), config);
  // };
};

// 从index.js中获取到resources.js中所有接口的信息列表对象  遍历得到每一个接口
const generateApiMap = (map) => {
  const facade = {};
  Object.keys(map).forEach((key) => {
    // key 得到每一条的key值
    facade[key] = toMethod(map[key]);
  });
  return facade;
};

// 将generateApiMap暴露出去
export default generateApiMap;

 

使用：this.&api.fetchDict（接口名称）({传参})

 

整体的思路就是首先将所有的接口放在resources.js中，在index.js中调用generateApiMap，也就是我们的apiUtil.js，在apiUtil.js中将所有的接口遍历后转换为相应的方法。