详解Axios统一错误处理与后置的完整攻略

概述

Axios是一个功能强大的HTTP请求库，它支持浏览器和Node.js环境。在实际开发中我们经常需要发起网络请求，而Axios不仅在API设计上极其灵活，而且对于统一的错误处理和请求后置处理提供了方便的功能。

本文将详细讲解如何使用Axios实现统一的错误处理和请求后置处理，本文涵盖以下内容：

错误处理的需求分析
结合Axios提供的响应拦截器实现统一错误处理
请求后置处理的需求分析
结合Axios的请求拦截器实现请求后置处理

错误处理

API接口在网络请求过程中，有时候会由于网络波动等因素导致请求失败，或者服务器返回的JSON数据格式不正确，这些情况都需要针对性设置错误处理。

需求分析

对于网络请求失败的情况，需要给出友好的提示信息
对于服务器返回的JSON数据格式不正确的情况，需要标识出错误的原因

实现

Axios提供了响应拦截器，可以用来实现统一的错误处理。

下面是一个示例代码：

import axios from 'axios';

// 创建实例时设置配置的默认值
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 添加响应拦截器
instance.interceptors.response.use(
  // 对响应数据进行处理
  response => {
    // 判断是否为成功的响应
    if (response.status === 200) {
      // 返回经过处理的响应数据
      return response.data;
    }

    // 处理错误的响应
    return Promise.reject(new Error('响应错误'));
  },
  // 对响应错误进行处理
  error => {
    // 对于请求错误或响应错误，应该给出友好的提示信息
    if (error.message.includes('timeout')) {
      return Promise.reject(new Error('请求超时'));
    }
    if (error.response) {
      const status = error.response.status;
      switch (status) {
        case 401:
          return Promise.reject(new Error('登陆过期，请重新登陆'));
        case 404:
          return Promise.reject(new Error('请求接口不存在'));
        default:
          return Promise.reject(new Error('服务器错误'));
      }
    } else {
      return Promise.reject(new Error('网络错误'));
    }
  }
);

请求后置处理

在请求结束后，通常需要进行一些后续处理，例如更新一些状态信息、增加请求的计数等。

需求分析

在请求结束后，需要增加请求的计数
在请求结束后，需要更新一些状态信息

实现

Axios提供了请求拦截器，可以用来实现请求后置处理。

下面是一个示例代码：

import axios from 'axios';

// 创建实例时设置配置的默认值
const instance = axios.create({
  baseURL: 'https://api.example.com',
});

// 用于记录请求计数
let requestCount = 0;

// 添加请求拦截器
instance.interceptors.request.use(
  // 对请求进行处理
  config => {
    // 增加请求计数
    requestCount += 1;
    // 在请求头中添加token
    config.headers.token = localStorage.getItem('token');
    return config;
  },
  // 对请求错误进行处理
  error => Promise.reject(error)
);

// 添加响应拦截器
instance.interceptors.response.use(
  // 对响应数据进行处理
  response => {
    // 此处省略对响应数据的处理代码
    // ...

    // 在处理完响应数据后，更新状态信息
    requestCount -= 1;
    return response.data;
  },
  // 对响应错误进行处理
  error => {
    // 对于请求错误或响应错误，应该给出友好的提示信息
    // 此处省略错误处理代码
    // ...

    // 在处理完响应错误后，更新状态信息
    requestCount -= 1;
    return Promise.reject(error);
  }
);