axios取消请求原理、拦截器原理

本文介绍: axios是什么？基于 promise的异步 ajax 请求库a x ios有什么新特点？支持请求/响应拦截器★支持请求取消.浏览器端（创建 ajax 请求）/node端(创建一般的HTTP请求)都可以使用请求/响应数据转换–&g t;使用时写的是对象，axi os 自动转换成了json。接受时axi os也自动将json 转换为了对象。………

axi os是什么？
基于 promise的异步 ajax请求库

axios有什么新特点？

拦截器的使用

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
  	  // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

const interceptorId = axios.interceptors.request.use(function () {/*...*/}); 
axios.interceptors.request.eject(interceptorId); 
/*
在axios对象属性中暴露出了一个interceptors这个属性对象，该对象有两个属性分别是request、response，这两个属性存分别对应请求前与请求后我们想做的一些操作，再调用use函数配置了两个函数进去。
*/

拦截器原理: 本质是一个顺序问题请求拦截器-api请求-响应拦截器

var promise = Promise.resolve(config);
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

取消请求的使用
1.excut o r 执行器函数是同步执行的,参数是用于取消当前请求的函数
2.当取消当前请求的函数被调用时，该请求会进入失败的流程，请求失败的error是Cancel对象类型，Cancel里面有message属性

let cancel //保存用于取消请求的函数
axios.get("/user",{
	//new axios.CancelToken时得到一个函数
     cancelToken:new axios.CancelToken(function excutor(c){
	 	cancel = c; //准备发请求时先把取消请求的函数保存起来，后续可以调用来取消当前请求
	}).then(response =&gt;{
        cancel = null; //如果请求完成就不要取消请求了
    },error =&gt;{
		cancel = null; //失败之后也不需要取消了
	})
})

function CancelToken(excutor){
//...
let resolvePromise;
//为取消请求准备一个promise对象，并保存resolve函数
this.promise = new Promise(function promiseExecutor(resolve){
	resolvePromise = resolve;
})
let token = this; //保存当前CancelToken对象
//执行同步执行器，function cancel为参数，这个参数就取消请求的参数
excutor(function cancel(message){ 
	//....
	//将token的reason指定为一个Cancel对象
	token.reason = new Cancel(message);
	resolvePromise(token.reason); //将取消请求的promise指定为成功，成功的值为reason
})
}

//取消请求部分的代码
if(config.cancelToken){
	config.cancelToken.promise.then(function onCanceled(cancel){
		if(!request)return;
		request.abort();//中断请求
		reject(cancel);
		request = null
	})
}

function axios({
	url,
	method='GET',
	params={},
	data={},
}){
	return new Promise(resolve,reject){
    //数据初始化操作
    let query ='' ;
    Object.keys(params).forEach(key => {
        query += `${key}=${params[key]}&amp;` 
    })
    if(query){
      query = query.substring(0,query.length-1);
      url = url + '?' + query;
    }
    method = method.toUpperCase();
    let xhr = new XMLHttpRequest() //创建xhr对象
    xhr.open(url,method); //初始化请求

    //状态监听,send是异步的
    xhr.onreadystatechange = function(){
      if(xhr.readyState !==4) return;
      //请求完成
      let {status,statusText} = xhr;
      if (status>=200&amp;&amp;status<=299){
        const response = {
          data:JSON.parse(xhr.response),
          status,
          statusText,
      }
      resolve(response)
      }else{
        reject(new Error(`request error status is ${status}`))
      }
    }

    switch(method){//发送请求
        case 'GET' || 'DELETE':
          xhr.send();
          break;
        case 'POST' || 'PUT':
          xhr.setRequestHeader("Content-Type","application/json;charset=utf");
          xhr.send(JSON.stringify(data));
    } 
	}
}

方法/属性	描述
read yState	请求的状态 0：初始 1：open()之后 2：send()之后 3：请求中 4：请求完成
onread y state change监视回调函数	绑定 read yState改变的监听 on…当…时执行
open(meth od，url[,async])	初始化一个请求默认 async：true，参数是请求行
send(data)	发送请求参数为字符串，可以是json对象字符串，也可以是urlencoded格式字符串
abort()	中断请求中断的是发出请求，还没结束的请求