axios 模块化封装_对axios的二次封装的实现

Axios 是一个基于 promise 的 HTTP 库 ，使用了axios来进行数据的请求，一般都需要我们对它进行封装处理。

Axios封装

let service=axios.create({
    baseURL:'',
    timeout:5000,
    headers:{
      'content-type':'application/x-www-form-urlencoded'//转换为key=value的格式必须增加content-type
    },
})
let cancel ,promiseArr = {}
const CancelToken = axios.CancelToken;

//http-请求拦截
service.interceptors.request.use(
  config => {
    if (promiseArr[config.url]) {//发起请求时，取消掉当前正在进行的相同请求
        promiseArr[config.url]('操作取消')
        promiseArr[config.url] = cancel
    }else{
        promiseArr[config.url] = cancel
    }
    return config
  },
  error => {
    return Promise.reject(err)
  }
);

//http-响应拦截
service.interceptors.response.use(
  response => {
  	if(response.data.code ==2){//返回code码为2的时候,代表登录失效
  		location.href="/login"
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)

export default {
    get(url,param){//get请求
      return new Promise((resolve,reject) => {
        service({
          method: 'get',
          url,
          params: param,
          cancelToken: new CancelToken(c => { cancel = c })
        }).then(res => {
          resolve(res)
        })
      })
    },
    post(url,param){//post请求
      return new Promise((resolve,reject) => {
        service({
          method: 'post',
          url,
          data: param,
          cancelToken: new CancelToken(c => {cancel = c })
        }).then(res => {
          resolve(res)
        })
      })
    }
}

在vue中使用：

在main.js文件下：

import {post,get} from './lib/http'//请求

//定义全局变量 
Vue.prototype.$post=post; 
Vue.prototype.$get=get;

这样基本的功能就有了，然后在页面上使用this.$post、this.$get来调用。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1484