axios的封装

axios是现在前端最常用发请求的工具库,本文将对axios进行封装

第一步: 引入axios

cnpm install axios -S

第二步: 封装get/post/put等方法

import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';


//http request 拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

const fetch = (url,params={}) => {
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 const post = (url,data = {}) => {
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

 /**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */

const patch = (url,data = {}) => {
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

 /**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

const put = (url,data = {}) => {
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

/*
* 将方法统一输出
*/
export default {
    patch,
    post,
    put，
    fetch
}

第三步: 拦截响应与请求

//拦截所有的请求
  axios.interceptors.request.use(config => { console.log(config)
    // 在需要带上token数据的地方,加上token
    if(!config.url.endsWith('/login')){ //login接口不用加上token
      config.headers.Authorization = localStorage.getItem('myToken');
    }
    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  })

  // 添加响应拦截器
  axios.interceptors.response.use(function (response) { console.log(response)
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

可以将拦截的js代码放置到VUE中的main.js里面,这样就可以做到全局拦截了

二、 实际案例:

1. react中使用axios

2. Vue中使用axios

三、对齐微服务架构

为了对齐微服务架构，做到RESTful风格，我做出如下调整：

3.1 目录结构调整

├─api
    index.js axios底层封装
    ├─base  负责调用基础服务,basecenter
    ├─business 负责调用具体业务服务,businesscenter
    └─user  负责调用用户相关服务,usercenter

这样就可以将所有与api有关的代码，放在一起便于维护

3.2 增加适配层

import api from '../index'
import { paramsFilter } from "@/utils/helper";

// 添加角色
export const addRole = params => api.post(`role/add`, paramsFilter(params));

其中的paramsFilter方法是作为处理接口数据的方法，这样在.vue文件中调用方法的时候，就可以直接使用处理好的数据，将接口数据的处理放在适配层里面。极大减少了业务逻辑的耦合。

四、进一步抽离业务逻辑

4.1 为什么要抽离

因为每次调用接口都要import这样调用不同文件里的接口就要import多次，那么为什么不利用类的思维来管理接口呢？同时还可以增加命名空间，极大的优化api的管理。

4.2 源码