axios二次封装，你了解吗？Axios二次封装及使用开发中把Axios进行二次封装，可以更好的使用Axios的请求拦

Axios二次封装及使用

开发中把Axios进行二次封装，可以更好的使用Axios的请求拦截器，以及响应拦截器去处理数据

实现代码如下新建 /utils/request.js

1.请求之前

//我们就可以根据功能模块配置不同的 axios 配置。
import axios from "axios";
const request = axios.create({
  //基础路径：发请求的时候，路径中会带有api
  baseURL: http://47.93.101.203/api,
  //代表请求超时的时间为5s 
  timeout:5000,
});
// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    const { data } = response;
    return data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

当然请求拦截器中，除了处理添加token以外，还可以进行一些其他的处理，具体的根据实际需求进行处理。

2.响应之后

// 响应拦截
axios.interceptors.response.use(function (response) {
if (response.data.code === 401 ) {//用户token失效 //清空用户信息 
sessionStorage.user = ''
sessionStorage.token = ''
window.location.href = '/';//返回登录页
return Promise.reject(msg)//接口Promise返回错误状态，错误信息msg可有后端返回，也可以我们自己定
义一个码--信息的关系。
} 
if(response.status!==200||response.data.code!==200){//接口请求失败，具体根据实际情况判断 
message.error(msg);//提示错误信息 
return Promise.reject(msg)//接口Promise返回错误状态
} 
return response 
}, function (error) {
if (axios.isCancel(error)) { 
requestList.length = 0
// store.dispatch('changeGlobalState', {loading: false}) 
throw new axios.Cancel('cancel request') } 
else {
message.error('网络请求失败,请重试')
} 
return Promise.reject(error) })

当然响应拦截器同请求拦截器一样，还可以进行一些其他的处理，具体的根据实际需求进行处理。

3.使用axios

axios使用的时候一般有三种方式：

执行get请求

axios.get('url',{
params:{},//接口参数
}).then(function(res){ 
console.log(res);//处理成功的函数 相当于success }).catch(function(error){
console.log(error)//错误处理 相当于error 
})

执行post请求

axios.post('url',{
  data:xxx//参数
  },{
  headers:xxxx,//请求头信息
}).then(function(res){
  console.log(res);//处理成功的函数 相当于success
}).catch(function(error){
  console.log(error)//错误处理 相当于error
})

axios API 通过相关配置传递给axios完成请求

axios({
  method:'delete',
  url:'xxx',
  cache:false,
  params:{id:123},
  headers:xxx,
})
//------------------------------------------//
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'monkey',
    lastName: 'soft'
  }
});

直接使用api的方式虽然简单，但是不同请求参数的名字不一样，在实际开发过程中很容易写错或者忽略，容易为开发造成不必要的时间损失。前面两种方式虽然没有参数不一致的问题，但是使用的时候，太过于麻烦。那么怎么办呢？前面两种虽然使用过于麻烦，但是仔细观察，是可以发现有一定的相似点，我们便可以基于这些相似点二次封装，形成适合我们使用的一个请求函数。直接上代码：

/*
*url:请求的url
*params:请求的参数
*config:请求时的header信息
*method:请求方法
*/
const request = function ({ url, params, config, method }) {
  // 如果是get请求 需要拼接参数
  let str = ''
  if (method === 'get' && params) {
    Object.keys(params).forEach(item => {
      str += `${item}=${params[item]}&`
    })
  }
  return new Promise((resolve, reject) => {
    axios[method](str ? (url + '?' + str.substring(0, str.length - 1)) : url, params, Object.assign({}, config)).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

这样我们需要接口请求的时候，直接调用该函数就好了。不管什么方式请求，传参方式都一样。