记vue中封装axios

文件结构：

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;

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

猜你喜欢