首页 > 其他分享 >axios二次封装

axios二次封装

时间:2022-10-11 21:22:22浏览次数:61  
标签:case break axios 封装 二次 warn status MSG message

import axios from 'axios';
import nprogress from 'nprogress';
import { message as MSG } from 'antd';
const baseURL = '';

const service = axios.create({
  baseURL,
});
// 请求拦截器
service.interceptors.request.use(
  config => {
    nprogress.start();
    const token = localStorage.getItem('token') || '';
    config.headers.token = token;
    return config;
  },
  error => {
    error.data = {};
    error.data.message = '服务器异常';
    MSG.warn('服务器异常!请稍后再试!');
    return Promise.resolve(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    nprogress.done();
    if (response.data.code == 50006) {
      MSG.warn('请登录再访问!');
      setTimeout(() => {
        window.location.href = '/';
      }, 2000);
    } else if (response.data.code == 50007) {
      MSG.warn('登录过期,请重新登录!');
      setTimeout(() => {
        window.location.href = '/';
      }, 2000);
    }
    const status = response.status;
    let msg = '';
    if (status < 200 || status >= 300) {
      // 处理http错误,抛到业务代码
      msg = showStatus(status);
      if (typeof response.data === 'string') {
        response.data = { msg };
      } else {
        response.data.msg = msg;
      }
    }
    return response;
  },
  error => {
    // 错误抛到业务代码
    error.data = {};
    error.data.msg = '请求超时或服务器异常,请检查网络或联系管理员!';
    return Promise.resolve(error);
  }
);

const showStatus = status => {
  let message = '';
  switch (status) {
    case 400:
      message = '请求错误(400)';
      MSG.warn('请求错误(400)');
      break;
    case 401:
      message = '未授权,请重新登录(401)';
      MSG.warn('未授权,请重新登录(401)');
      break;
    case 403:
      message = '拒绝访问(403)';
      MSG.warn('拒绝访问(403)');
      break;
    case 404:
      message = '请求出错(404)';
      MSG.warn('请求出错(404)');
      break;
    case 408:
      message = '请求超时(408)';
      MSG.warn('请求超时(408)');
      break;
    case 500:
      message = '服务器错误(500)';
      MSG.warn('服务器错误(500');
      break;
    case 501:
      message = '服务未实现(501)';
      MSG.warn('服务未实现(501)');

      break;
    case 502:
      message = '网络错误(502)';
      MSG.warn('网络错误(502)');
      break;
    case 503:
      message = '服务不可用(503)';
      MSG.warn('服务不可用(503)');
      break;
    case 504:
      message = '网络超时(504)';
      MSG.warn('网络超时(504)');
      break;
    case 505:
      message = 'HTTP版本不受支持(505)';
      MSG.warn('HTTP版本不受支持(505)');
      break;
    default:
      message = `连接出错(${status})!`;
      MSG.warn(`连接出错(${status})!`);
  }
  return `${message},请检查网络或联系管理员!`;
};

export default service;

 

标签:case,break,axios,封装,二次,warn,status,MSG,message
From: https://www.cnblogs.com/formerstory/p/16782528.html

相关文章

  • 15、JAVA入门——封装
    目录​​ 一、封装​​​​      1、封装概述​​​​   2、封装的步骤​​​​二、Java里的包​​​​      1、包的概述​​​​      2、包的......
  • python内置模块loggin日志实现单例封装
    1importlogging2fromconfigs.global_dataimportLogger345classLogHandler:6obj=None78def__init__(self):9self.file......
  • LMS Virtual.Lab二次开发:声学仿真理论基础准备(Python)
    1、简介采用LMSVirtual.LabAcoustics声学软件,可以直接打开CATIAV5的设计模型、或者间接导入其它CAD软件的三维模型,实现从声学模型创建、复杂边界条件加载、快速求解计算......
  • axios完整配置请求数据
    <scripttype="module">importaxiosfrom'./lib/axios.min.js'//axios完整配置请求语法:axios(config)axios({url:'/admin/detail',//url会拼接在......
  • Axios 取消重复请求
    在实际开发中,我们需要对用户发起的重复请求进行拦截处理,比如用户快速点击提交按钮解决办法1、新建request.jsimportaxiosfrom'axios'//创建axios实例constse......
  • 农村高中生源转型期提升学生二次函数建模能力的课堂探究
    加强数学建模训练,提高学生数学建模能力   通过结合具体的数学问题,引导高中生深入分析问题,有效地构建求解问题的数学模型,可以使学生逐步掌握数学问题求解的基本思路......
  • #yyds干货盘点#前端架构API层的封装
    上午好,今天为大家分享下个人对于前端​​API​​​层架构的一点经验和看法。架构设计是一条永远走不完的路,没有最好,只有更好。这个道理适用于软件设计的各个场景,前端​​API......
  • Vue3使用axios
    如何在Vue项目中使用axios请求http://www.45fan.com/article.php?aid=1D82KNnQB62JUc6OVue3-使用axios发起网络请求https://blog.csdn.net/liuyuxin36/article/details/......
  • axios取消上一个请求
      链接,里面有效果,亲测有效果https://codesandbox.io/s/simple-example-of-cancelling-axios-request-kyrnc?file=/src/App.vue:1074-1096这个可能需要外网才能打开,要......
  • 三、Axios入门——Axios的CRUD基本使用
    一、启动json-server服务详细教程:https://www.cnblogs.com/wml-it/p/16773220.html二、搭建页面<!doctypehtml><htmllang="en"><head><metacharset="UTF-8">......