【前端学习日记】axios拦截器

先附上文档地址：axios中文文档|axios中文网 | axios

分类：请求拦截器，相应拦截器。

拦截器作用：在请求或响应被 then 或 catch 处理前拦截它们 ---官方解释

实际上说的似乎有点不正确。当一个请求发送出去后，再拦截有什么意义呢。

基于Promise浅显的理解，axios发起请求作为一个异步任务，会有两种结果，请求成功执行then方法里的代码，请求失败执行catch里面的代码，它会向下通过return进行一个链式的数据传递。所以一旦到了then或者catch之前，换句话说，就是请求已经完成了，不论请求成功还是请求失败。所以这个说法不太严谨。

实际流程：请求拦截器2-请求拦截器1-发送请求-服务器响应-响应拦截器1-响应拦截器2-response响应

2112的流程，是因为请求拦截器的工作流程是后设置先执行。

所以，应该这样理解拦截器的工作流程：当一个请求发起前，响应拦截器可以做一些什么，比如做一些判断；当服务器获得请求并处理请求后，响应拦截器可以做一些什么。这样看来，实际开发中应该是请求拦截器用的应该会多一些，毕竟只要发出了正确的请求，获得数据的是必然的。

通过代码测试一下：JS代码如下

<button onclick="testGet()">获取商品列表1</button><br> 

<script>
// <!-- 添加请求拦截器1(回调函数) -->
    axios.interceptors.request.use(
      //可以在发送请求做些什么
      config => {
        console.log('request interceptor1 success')
        // 输出一下config这个回调，看看有什么东西
        console.log(config)

        return config
      },
      // 对请求错误做些什么
      error => {
        console.log('request interceptor1 defeat')
        return Promise.reject(error)
      }
    )

// 请求拦截器2
    axios.interceptors.request.use(
      //可以在发送请求做些什么
      config => {
        console.log('request interceptor2 success')
        return config
      },
      // // 对请求错误做些什么
      error => {
        console.log('request interceptor2 defeat')
        return Promise.reject(error)
      }
    )

// <!-- 添加响应拦截器1 -->
      axios.interceptors.response.use(
        // 对响应的数据做些什么
        response => {
          console.log('response interceptor1 success')
        // 输出一下response回调，看看有什么东西
          return response
        },
        // 对响应的错误做些什么
        error => {
          console.log('response interceptor1 defeat')
          return Promise.reject(error)
        }
      )

// 响应拦截器2
      axios.interceptors.response.use(
        // 对响应的数据做些什么
        response => {
          console.log('response interceptor2 success')
          console.log(response)
          return response
        },
        // 对响应的错误做些什么
        error => {
          console.log('response interceptor2 defeat')
          return Promise.reject(error)
        }
      )


// 发送请求
    function testGet() {
      axios.get('http://localhost:3000/posts')
      .then(response => {
        console.log(response.data)
      })
      .catch(error => {
        console.log(error.message)
      })
    }
  </script>

控制台输出情况：

 可以看到执行的流程确实是21---12

首先，我们在请求发起前输出了一段文本：request interceptor2 success 和 request interceptor1 success，因为我这里是请求成功的，所以没有请求失败的输出。接着，请求成功后，对响应的数据可以做些什么，执行的是响应拦截器，输出了文本：response interceptor1 success和response interceptor2 success，响应成功，没有执行相应错误的输出。最后执行响应回调。

这里值得关注的是config和response这两个回调身上有什么东西：

 在控制台的输出可以看到，config身上携带了发起请求包含的所有东西，所以你可以在这个回调函数中对请求做些一些处理，如添加cancelToken之类的取消请求。而response身上则是携带着所有的响应的配置项，所以可以对响应的数据做一些什么处理。

 但一切的前提还是：发起请求。不然拦截器无法获取的具体的数据。也就无法工作了。