从xhr到axios源码分析（三）

axios的拦截器

1.请求拦截器和响应拦截器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>axios.interceptors</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  //添加请求拦截器(回调函数)
  //说明：请求拦截器顾名思义：表示在发送请求之前拦截
  axios.interceptors.request.use(
    config => {
      //必须return config
      console.log('request interceptor1 success')
      return config
    },
    error => {
      console.log('request interceptor1 error')
      return Promise.reject(error)
    }
  )
  axios.interceptors.request.use(
    config => {
      //必须return config
      console.log('request interceptor2 success')
      return config;
    },
    error => {
      console.log('request interceptor2 error')
      return Promise.reject(error)
    }
  )
  //添加响应拦截器(回调函数)
  axios.interceptors.response.use(
    response => {
      //必须return response
      console.log('response interceptor1 success')
      return response;
    },
    error => {
      console.log('response interceptor1 error')
      return Promise.reject(error)
    }
  )
  axios.interceptors.response.use(
    response => {
      //必须return response
      console.log('response interceptor2 success')
      return response;
    },
    error => {
      console.log('response interceptor2 error')
      return Promise.reject(error)
    }
  )
  //说明：响应拦截器顾名思义：表示在服务器接收响应后拦截
  //接口需要自己添加
  axios.get('http://locahost:/name').then(response => {
    console.log('data',response)
  }).catch(error => {
    console.log('error',error)
  })
</script>

</html>

如果我们执行get请求的时候，看一下返回的请求
在这里插入图片描述
首先我解释一下response error的原因是因为我本地并没有这个接口才导致这个请求error。这个打印只是想看一下请求拦截器和响应拦截器的执行方式
1）拦截器和返回数据的执行：先执行请求拦截器，再执行响应拦截器，最后执行你回调的代码
我们先看请求拦截器：
返回的结果说明：请求拦截器的执行方式是从后往前执行；
响应拦截器：
返回的结果说明：响应拦截器执行方式从前往后执行
2）为什么我们拦截器为什么要return config ，return response，return error
原因：会导致你的代码不在往下进行。基于promise的执行方式（相当于我们物理的串联电路），如果你没有return，后边拦截器或者回调函数得到的数据就是‘undefined’，最后直接就报错了。
2.取消请求

const CancelToken = axios.CancelToken;
let cancel;//用于保存取消请求的函数。

axios.get('/user/12345', {
    
    
  cancelToken: new CancelToken(function executor(c) {
    
    
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
}).then(
 response => {
    
    
 	cancal = null
 	console.log('请求成功')
 },
 error => {
    
    
	cancel = null
	console.log('请求失败')
}
)

// cancel the request
cancel();

未完待续。。。

从xhr到axios源码分析（三）

axios的拦截器

猜你喜欢