Vue项目axios的管理

将整体制作为Vue插件

挂载到Vue上

import axios from 'axios';

const Http = {};

Http.install = Vue => {
  Vue.prototype.$http = {
    get(url, config) {
      return axios.get(url, config);
    },
    post(url, data, config) {
      return axios.post(url, data, config);
    },
    put(url, data, config) {
      return axios.post(url, data, config);
    },
    delete(url, config) {
      return axios.delete(url, config);
    }
  };
};

export default Http;

• 这样处理完后,就可以在项目中使用类似this.$http.get,来调用接口

设计拦截器

拦截器

// 继续处理,需要返回config
const normalResolve = config => {
  return config;
};

// 继续处理,需要返回Promise.reject
const normalReject = error => {
  return Promise.reject(error);
};

// 单文件添加拦截器
export const registerHandler = handlers => {
  handlers.forEach(
    ({
      requestResolve = normalResolve,
      requestReject = normalReject,
      responseResolve = normalResolve,
      responseReject = normalReject
    }) => {
      axios.interceptors.request.use(requestResolve, requestReject);
      axios.interceptors.response.use(responseResolve, responseReject);
    }
  );
};

举例防抖拦截器文件

import axios from 'axios';
import { isEqual } from 'lodash';

const queue = [];
const DELAY = 500;

const { CancelToken } = axios;
const source = CancelToken.source();

const exists = (_url, _method, _params, _data) => {
  return queue.some(
    ({ url, method, params, data }) =>
      url === _url &&
      method === _method &&
      isEqual(params, _params) &&
      isEqual(data, _data)
  );
};

const add = (url, method, params, data) => {
  queue.push({
    url,
    method,
    params,
    data
  });
};

const remove = (_url, _method, _params, _data) => {
  const request = queue.find(
    ({ url, method, params, data }) =>
      url === _url &&
      method === _method &&
      isEqual(params, _params) &&
      isEqual(data, _data)
  );
  if (request) {
    queue.splice(queue.indexOf(request), 1);
  }
};

export default {
// 请求时拦截,防抖函数
  requestResolve(config) {
  	// 是否传递debounce参数,否则都进行防抖
    const { debounce = true } = config;
    if (debounce) {
      const { url, method, params, data } = config;
      if (!exists(url, method, params, data)) {
        add(url, method, params, data);
        setTimeout(() => {
          remove(url, method, params, data);
        }, DELAY);
      } else {
        source.cancel('cancel request because of debounce');
        return Object.assign(config, {
          cancelToken: source.token
        });
      }
    }
    return config;
  }
};

运行于挂载函数中

import axios from 'axios';
import { registerHandler } from './handler';
import { debounceHandler } from './debounce';

const Http = {};

Http.install = Vue => {
  registerHandler([debounceHandler]);
  Vue.prototype.$http = {
    get(url, config) {
      return axios.get(url, config);
    },
    post(url, data, config) {
      return axios.post(url, data, config);
    },
    put(url, data, config) {
      return axios.post(url, data, config);
    },
    delete(url, config) {
      return axios.delete(url, config);
    }
  };
};

export default Http;

注册到Vue项目

• 利用Vue的插件引入,挂在到vue的原型上

import Vue from 'vue';
import Http from 'src/lib/http';

Vue.use(Http);

export default Vue;