手写Axios核心原理

Axios是一个基于promise的HTTP库，它能够自动判断当前环境，自由切换在浏览器和 node.js环境中。如果是浏览器，就会基于XMLHttpRequests实现；如果是node环境，就会基于node内置核心http模块实现。同时，它还用promise处理了响应结果，避免陷入回调地狱中去。

不仅如此，Axios还可以拦截请求和响应、转化请求数据和响应数据、中断请求、自动转换JSON数据、客户端支持防御XSRF等。如此众多好用的功能，快来一起看看它是如何实现的吧！

1.基本使用

axios基本使用方式主要有：

• axios(config)
• axios.method(url,data,config)

// 发送 POST 请求
axios({
   
  method: 'post',
  url: '/user/12345',
  data: {
   
    username: 'Web前端严选',
    age: 2
  }
});
// GET请求ID参数
axios.get('/user?ID=12345')
  .then(function (response) {
   
    console.log(response);
  })
  .catch(function (error) {
   
    console.log(error);
  });

2.实现axios

从axios(config)的使用上可以看出导出的axios是一个方法，从axios.get()的使用上可以看出导出的axios原型上会有get,post,put,delete等方法。
由分析可知，axios实际上是Axios类中的一个方法。我们可以先写一个request方法来实现主要的请求功能，这样就能使用axios(config)形式来调用了。

class Axios{
   
    constructor(){
   
    }
    request(config){
   
        return new Promise((resolve) => {
   
            const {
   url='',data={
   },method='get'} = config; //解构传参
            const xhr = new XMLHttpRequest;     //创建请求对象
            xhr.open(method,url,true); 
            xhr.onreadystatechange = () => {
   
                if(xhr.readyState == 4 && xhr.status == 200){
   
                    resolve(xhr.responseText);
                    //异步请求返回后将Promise转为成功态并将结果导出
                }
            }
            xhr.send(JSON.stringfy(data));
        })
    }
}
function CreateAxiosFn(){
   
    let axios = new Axios;
    let req = axios.request.bind(axios);
    return req;
}
let axios = CreateAxiosFn();

然后搭建一个简易服务端代码，以测试请求的效果：

const express = require('express')
let app = express();
app.all('*', function (req, res, next) {