Vue项目使用axios配置请求拦截和响应拦截以及判断请求超时处理提示

呆呆加油呀2023-09-08 9:21

哈喽大家好啊，最近做Vue项目看到axios

axios官网：起步 | Axios 中文文档 | Axios 中文网 (axios-http.cn)

重要点：

axios是基于Promise封装的

axios能拦截请求和响应

axios能自动转换成json数据

等等

安装：

$ npm install axios

Vue项目中使用axios实现请求拦截

javascript 复制代码

import axios from 'axios';// 引入axios

const httpAxios = axios.create({});// 创建实例

let config = {
	TIMEOUT: 600000,//设置超时时间为10min
};

// axios 配置超时时间
httpAxios.defaults.timeout = config.TIMEOUT;
  
  // axios设置  请求拦截
  httpAxios.interceptors.request.use(
    // config配置选项
    config => {
      console.log(config,'1')
      return config;
    },
    // error
    error => {
      return Promise.reject(error);
    }
  )

Vue项目中使用axios实现响应拦截

javascript 复制代码

 // axios响应拦截
  httpAxios.interceptors.response.use(
    // response响应成功
    response => {
      const config = response.config;
      console.log(config,'2')
      return response;
    },
    // 响应error
    error => {
      const config = error.config;
      console.log(config,'3')
      if(error.message.includes('timeout')) {
        return Promise.reject('timeout');// reject这个错误信息
        // 判断请求异常信息中是否含有超时timeout字符串
      }
      return Promise.reject('网络链接失败，请稍后再试!')
    }
  )

封装axios请求

javascript 复制代码

export const getHttpInfo = function (data) {
  return new Promise((resolve, reject) => {
    let token = ''
    if (data.headers) {
      token = data.headers.Authorization
    }
    httpAxios(data).then((res) => {
      resolve(res)
    }).catch((e) => {})
  })
}

设置超时时间并在响应拦截中判断超时并提示

javascript 复制代码

 gethttpInfo({
          method: 'post',
          url: url,
          data: this.order,
          headers: {
            'Authorization': localStorage.getItem('token')
          }
        }).then((res) => {
            }).catch((error) => {
              this.$message({
                type: 'warning',
                message: error!=='timeout' ? error : '其他错误'
          })
        });

参考原文：

Vue项目请求超时处理_vue接口请求超时处理_一捆铁树枝的博客-CSDN博客