axios对请求各种异常情况处理的封装方法

Axios是一个流行的HTTP请求库，可用于从浏览器或Node.js中发起请求。它可以非常方便地对请求异常情况进行处理。

以下是对Axios进行请求异常处理的封装方法的攻略：

设置默认配置

可以设置axios的默认配置，包括baseURL、timeout等。这样可以封装通用配置，减少代码重复。

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL,
  timeout: 5000,
});

export default axiosInstance;

处理异常情况

在Axios中可以使用拦截器处理请求和响应的异常情况。

请求拦截器

可以在请求发送前添加拦截器，对请求进行处理，例如添加请求头、处理请求参数等。

axiosInstance.interceptors.request.use(
  (config) => {
    // 添加请求头
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

响应拦截器

可以在响应返回后添加拦截器，对响应进行处理，例如处理响应数据、统一处理错误信息等。

axiosInstance.interceptors.response.use(
  (response) => {
    // 处理响应数据
    const { code, data, message } = response.data;

    if (code === 200) {
      return data;
    } else {
      // 统一处理错误信息
      message.error(message);
      return Promise.reject(message);
    }
  },
  (error) => {
    // 处理服务器错误
    if ((error.message.indexOf('timeout') !== -1) || (error.response && error.response.status === 504)) {
      message.error('请求超时！');
      return Promise.reject(error);
    }
    if (error.response.status === 401) {
      message.error('您没有权限访问该页面，请先登录！');
      return Promise.reject(error);
    }
    if (error.response.status === 403) {
      message.error('您没有权限访问该页面！');
      return Promise.reject(error);
    }
    if (error.response.status === 404) {
      message.error('您访问的页面不存在！');
      return Promise.reject(error);
    }
    if (error.response.status === 500) {
      message.error('服务器出错！');
      return Promise.reject(error);
    }
    message.error('网络错误！');
    return Promise.reject(error);
  }
);

示例

这里给出两个使用Axios处理请求异常情况的示例：

示例1：请求超时

const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL,
  timeout: 5000,
});

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if ((error.message.indexOf('timeout') !== -1) || (error.response && error.response.status === 504)) {
      message.error('请求超时！');
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

axiosInstance.get('/api/data').then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});

示例2：处理服务器错误

const axiosInstance = axios.create({
  baseURL: process.env.BASE_URL,
});

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 500) {
      message.error('服务器出错！');
      return Promise.reject(error);
    }
    return Promise.reject(error);
  }
);

axiosInstance.post('/api/data', {
    username: 'admin',
    password: '123456',
}).then((response) => {
    console.log(response);
}).catch((error) => {
    console.log(error);
});

以上就是Axios请求异常情况处理的封装方法攻略，可以根据实际需要对Axios进行不同的封装处理。