封装ajax、axios请求-CSDN博客

作为一个前端开发工作者，与后台交互是必不可少的，用交互实现异步刷新页面、请求数据、发送数据等等。一般交互都是基于JavaScript的XMLHttpRequest来做封装，目前比较常用的有Ajax、Fetch、axios等。但是很多开发的时候都是直接用这几个给的方法，没有二次封装。虽然这几个给的直接用也很方便，但是不同项目不同公司，各自的约定也不一样，所以个人认为还是需要二次封装一个适合自己适合项目的交互方法。

由于本人从未用过Fetch,所以只讲解一下Ajax和axios本人的封装。

一般我们用Ajax的时候是这样的

$.ajax({
    type:'',
    url:'',
    data:{},
    success:function (data) {
    },
    error:function () {
        
    }
})
复制代码

然后在成功或者失败的方法里进行操作，但是一些失败的返回，是跟后台约定好的，是否不需要每一次调用都去判断一遍。或者是错误的时候，是否也不需要每一次都做判断，只要做一次判断，也就是全局的方法。再有就是参数，是否使用get还是post（一般只用这两个）直接用参数传参，数据地址也是。所以我自己封装了一个简易的方法

const apiurl = function (url) {
    return '' + url;
}
const ajaxConnect = (type,url,data,callBack) => {

var data = data || {};
    $.ajax({
        type:type,
        url:apiurl(url),
        data:data,
        success:function (data) {
            if(data.code == 10000){

       

      }else if(data.code == 0){

        

      }else{

        callBack(data.data);

      }       

 },
        error:function (data) {
            
        }
    })
};
复制代码

调用的时候就是

ajaxConnect('post','','',function (data) {
    

})
复制代码

可以看见，我们跟后台约定好错误代码，我们可以全局处理，错误之后要做什么操作也可以全局处理，包括错误状态也可以全局处理。包括每个接口都需要传一个token还是传什么也可以这边直接处理，这样就不需要每一个都加那个需要传的字段。

我们都知道，Ajax除了这些参数之外还有好多，比如穿文件、同步还是异步等等，需要的话可以封装上去，但是个人认为那些用的少的，需要用到的时候重新写一个Ajax会更好。

Axios封装跟Ajax差不多，反而更简单，因为axios已经帮我们设定好了响应和请求的过程。

//请求拦截器

axios.interceptors.request.use(config => {

  //请求之前处理

  return config

}, error => error);
复制代码

//响应拦截器即异常处理

axios.interceptors.response.use(response => {

  return response.data;

}, error => {

  //错误返回处理

  return error.response;

});

 

//设置默认地址

axios.defaults.baseURL = baseUrl;

//设置超过10秒报错

axios.defaults.timeout = 5000;

//还可设置各种请求头，按需配置

 

//get请求

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

 

//post请求

function post(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response);
      }, err => {
        reject(err)
      })
  })
}
复制代码

可以看见，axios有请求拦截器和响应拦截器，我们可以在请求前加上全局需要的字段或者是设定动画等等，也可以在响应拦截器里面处理跟后端约定好的各种code。

因为es6的Promise语法，我这边返回了Promise对象，只是为了需要同步的时候可以使用Promise.all()方法。

以上就是想要分享的封装请求，我封装的并不是很好，只是想让大家知道请求最好是自己分装一个适合的。

欢迎关注 Coding个人笔记公众号