axios学习笔记（2）

一、拦截器

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

·1）请求拦截器

在发送请求之前，可以通过回调函数来设置请求的条件或者对请求的数据进行操作，如果没有则继续送请求，如果出现error则将阻止请求。

2）响应拦截器

请求发送后当状态码在2xx的范围内都会触发该函数，对响应的数据进行操作，如果响应的数据发生错误则将输出错误。

 const send=document.querySelector('#send')
    
        axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    console.log('请求拦截器');
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    console.log('响应拦截器');
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
        send.addEventListener('click',function(){
          axios.get('http://127.0.0.1:8080/posts')
          .then(response=>{console.log(response);},err=>{console.log(err);})
          .catch(reason=>{console.log(reason);})
        })

 const send=document.querySelector('#send')
    
        axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
throw '请求失败'
    console.log('请求拦截器');
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    console.log('响应拦截器');
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
        send.addEventListener('click',function(){
          axios.get('http://127.0.0.1:8080/posts')
          .then(response=>{console.log(response);},err=>{console.log(err);})
          .catch(reason=>{console.log(reason);})
        })

 

 注：

如果有多个请求拦截器，则最后被建立的响应拦截器最先执行