Source code analysis from xhr to axios (3)

axios interceptor

1. Request interceptor and response interceptor

<!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>

If we execute the get request, take a look at the returned request.
Insert picture description here
First, let me explain the reason for the response error because I don't have this interface locally, which causes the request error. This print just wants to see how the request interceptor and response interceptor are executed
1) The execution of the interceptor and the returned data: first execute the request interceptor, then execute the response interceptor, and finally execute your callback code.
Let’s look at the request interceptor first. : The
returned result description: the execution method of the request interceptor is executed from back to front ; the
response interceptor: the
returned result description: the response interceptor execution method is executed from the front to the back
2) Why does the interceptor want to return config, return response , Return error
reason: it will cause your code not to proceed. Based on the promise-based execution method (equivalent to our physical series circuit), if you don't have a return, the data obtained by the interceptor or callback function will be'undefined', and an error will be reported directly in the end.
2. Cancel the request

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();

To be continued. . .

Source code analysis from xhr to axios (3)

axios interceptor

Guess you like