Axios学习02

响应结构

请求的响应包含以下信息：

// 服务器给的响应，即接口返回的数据
data: {},
// 服务器响应的http状态码
status: 200,
// 服务器响应的http状态信息
statusText: 'ok',
// 服务器响应的头
headers: {},
// 请求提供的配置信息
config: {},
// 生成此响应的请求
request: {},

配置默认值

我们可以为所有请求的指定配置项修改默认值，如下：

axios.defaults.baseURL = '/api';

拦截器

我们可以在请求/响应在被then或catch处理前拦截它们：

// 请求拦截
axios.interceptors.request.use(
  (config) => {
    // 在发起请求之前做些什么...
    return config;
  },
  (error) => {
    // 为请求错误做些什么...
    return Promise.reject(error);
  },
);

// 响应拦截
axios.interceptors.response.use(
  (config) => {
    // 可以在响应之前做些什么...
    return config;
  },
  (error) => {
    // 为响应错误做些什么...
    return Promise.reject(error);
  },
);

错误处理

对于一些公共的错误处理也可以在拦截器里实现。比如约定：接口status返回401，则代表失去登录态，即需要跳转到登录页、error的message值为“Network Error”，给出提示“网络错误”。

axios.interceptors.response.use(
  (config) => {
    return config;
  },
  (error) => {
    if (error.response) {
      /**
       * 服务器已经接受到了请求并且给出了响应，此时error.response值即为响应结构相关内容
       * 如果validateStatus属性的值为false，就会走到这里
       * 即此时响应的status已经超出了validateStatus内所约定的范围
       * 如果需要根据status值来判断是否失去登录态，就可以在这里实现
       */
       const {
         data,
         status,
         statusText,
         headers,
         config,
         request,
       } = error.response;
       return Promise.reject(error);
    }
    
    if (error.request) {
      /*
       * 走到这里说明请求已发出，但在timeOut属性所设定的时间内，没有收到服务器的响应
       * error.request在浏览器里时是XMLHTTPRequest的实例，在nodejs里时是http.ClientRequest的实例
       */
       console.log('服务器无响应');
       return Promise.reject(error);
    }
    
    if (error.message === 'Network Error') {
      console.log('网络错误');
      return Promise.reject('网络错误');
    }
    
    return Promise.reject(error);
  },
);