axios 模块化封装菜鸟教程对axios的二次封装的实现_http使用帮助

Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。Axios封装let service=axios.create({baseURL:”,timeout:5000,headers:{‘content-type’:’application/x-www-form-urlencoded’/

axios 模块化封装菜鸟教程对axios的二次封装的实现

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

axios 模块化封装菜鸟教程对axios的二次封装的实现_http使用帮助

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来调用。

海计划公众号
(1)
上一篇 2020/04/03 19:31
下一篇 2020/04/03 19:31

您可能感兴趣的内容