JavaScript封装axios的实现详解

目录

• 摘要
• 1.post方法
• 2.create方法
• 3.拦截器
• 4.代码

摘要

在vue中，我们调用接口使用的都是axios，使用之前我们也会进行一定的封装，然后再进行使用。

在这里，我们主要说一下axios的实现原理，以及如何使用原生的js来自己封装出一个axios。

这里实现出几个主要的方法，包括post请求方法，create配置方法，以及拦截器的方法。

1.post方法

在我们写方法之前，肯定是要先自己写一个类出来，里面的内容先不用写。

然后再在类的下面写出post的方法：

function iaxios () {
}
iaxios.prototype.post = function (url, data){
}

OK，现在我们来实现这个方法。

如果我们想用原生的js来实现post请求，我们应该这样做：

    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(data)

但是我们直接把这段代码放进去的话，会有一点问题：

1.官方的axios返回的是一个promise对象

2.官方的axios.post方法传的data参数是一个对象，原生的是一个字符串

所以为了解决第一个问题，我们可以在方法内返回一个promise对象，而第二个问题可以使用JSON.stringfy()这个方法解决。

iaxios.prototype.post = function (url, data) {
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          resolve(xhr.responseText)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(JSON.stringify(data))
  })
}

这样我们就实现了post的这个方法了。

而对get方法这里就不再写一遍了（写的时候主要注意参数的问题就可以了）。

2.create方法

首先我们知道，axios的create方法主要是对请求头等参数的配置，而这个方法同样也会返回一个axios的实例，这个实例可以继续使用post等方法。

所以我们首先想到的是，这个方法应该返回一个实例对象，而这个实例对象下的属性会根据传进来的对象设置。

这里面我只列举两个属性：

iaxios.prototype.create = function (obj) {
  var emaxios = new iaxios()
  emaxios.headers = obj.headers;
  emaxios.baseUrl = obj.baseUrl;
  return emaxios;
}

但是我们调用完这个create方法后，我们已经有了一些配置，如果再调用post等方法，我们应该是携带着这些参数去调用psot方法，所以在post方法内我们也要修改一下。

我们首先写一个配置请求头的方法：

function setHeader (xhr, headers) {
  for (var i in headers) {
    xhr.setRequestHeader(i, headers[i]);
  }
}

然后在post方法内，在ajax请求发送之前调用这个方法就可以了：

    setHeader(xhr, this.headers);

3.拦截器

在axios中，拦截器分两种，分别是请求拦截和响应拦截。

二者的作用也是相差不多的，一个是希望在请求之前做什么，一个是希望在请求之后做什么。

我们先来写一下请求拦截（这里面不考虑use）：

我们先想一下，interceptors一定是一个对象，并且下面有两个属性，分别是request和response。

那么我们就在类里面写一下：

function iaxios () {
  this.interceptors = {
    request (cb) {
    },
    response (aa) {
    },
  }
}

如果我们想在外边调用这个方法，会将一个回调函数传进来，

所以在我们这里我们需要把这个回调函数保存下来（考虑到有多个拦截器，所以我们采用数组保存）。

同时我们也要写一个data用于存放请求时的数据（因为在请求拦截器的回调函数中，有一个config参数，它包含着请求的数据）

function iaxios () {
  //保存拦截器中的回调函数
  this.saveRequest = []
  this.saveResponse = []
  //保存请求的数据
  this.data = {};
  let _this = this;
  this.interceptors = {
    request (cb) {
      _this.saveRequest.push(cb)
    },
    response (aa) {
      _this.saveResponse.push(aa)
    },
  }
}

现在拦截器的方法已经写好了，我们应该在什么时候调用呢？

请求拦截一定是在请求发送之前进行调用，我们拿post来举例子：

iaxios.prototype.post = function (url, data) {
  this.data = data;
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }

我们只需要在请求之前，把想要传递的数据copy下来（用于当作参数）。

然后循环调用我们保存下来的方法（其实就是调用的时候传递回调函数）

这样就能实现请求拦截了。

那么响应拦截一定是在返回响应数据之前调用了：

        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)

这里面我们创建的newRespose也是为了当作参数传递到响应拦截的方法里面。

这样的话响应拦截器的实现也完成了。

4.代码

最后再把整体的代码复制一份：

// const { resolve, reject } = require("core-js/fn/promise")
function iaxios () {
  //保存拦截器中的回调函数
  this.saveRequest = []
  this.saveResponse = []
  //保存请求的数据
  this.data = {};
  let _this = this;
  this.interceptors = {
    request (cb) {
      _this.saveRequest.push(cb)
    },
    response (aa) {
      _this.saveResponse.push(aa)
    },
  }
}
iaxios.prototype.post = function (url, data) {
  this.data = data;
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('post', url, true);
    //设置请求头的配置
    setHeader(xhr, this.headers);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          // _this.saveResponse && _this.saveResponse(newRespose)
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send(JSON.stringify(data))
  })
}
iaxios.prototype.get = function (url) {
  let _this = this;
  // this.saveRequest && this.saveRequest(this)
  //请求之前调用请求拦截的回调函数
  if (this.saveRequest) {
    this.saveRequest.forEach(fn => {
      fn(this)
    })
  }
  //返回promise对象
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    //设置请求头的配置
    setHeader(xhr, this.headers);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status == 200 || xhr.status == 304)) {
          //用来保存返回的数据
          let newRespose = new Object;
          newRespose.data = JSON.parse(xhr.responseText);
          // _this.saveResponse && _this.saveResponse(newRespose)
          //在返回数据之前调用相应拦截器的回调函数
          if (_this.saveResponse) {
            _this.saveResponse.forEach(fn => {
              fn(newRespose)
            })
          }
          resolve(newRespose.data)
        } else {
          reject(xhr.responseText)
        }
      }
    };
    xhr.send()
  })
}
//返回一个新的实例并且复制obj的属性
iaxios.prototype.create = function (obj) {
  var emaxios = new iaxios()
  emaxios.headers = obj.headers;
  emaxios.baseUrl = obj.baseUrl;
  return emaxios;
}
//设置请求头的方法
function setHeader (xhr, headers) {
  for (var i in headers) {
    xhr.setRequestHeader(i, headers[i]);
  }
}
var taxios = new iaxios();
export {
  taxios
}

到此这篇关于JavaScript封装axios的实现详解的文章就介绍到这了,更多相关JS封装axios内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！