axios请求、和返回数据拦截，统一请求报错提示_012

binta 发布于2019-08-23 14:27 / 2111人阅读

摘要：请求和返回数据拦截，统一请求报错提示官方文档英文文档中文文档请求和返回拦截，添加统一的报错信息请求的配置可以通过阅读官方文档来进行配置。写好之后，在写发送请求的文件中引用就可以了。拦截所有有请求与回复请求错误，请重试请求错误，请重试

axios请求、和返回数据拦截，统一请求报错提示 官方文档 https://github.com/axios/axios 英文文档 https://www.kancloud.cn/yunye... 中文文档 请求和返回拦截，添加统一的报错信息

请求的配置可以通过阅读官方文档来进行配置。axios api也很简介，多看看再自己尝试一下就会了
下面是我写的一个在react中的应用，UI用的阿里的Antd 框架，所以报错信息直接用全局弹窗来提示了。比较简陋。
写好之后，在写发送请求的文件中引用request 就可以了。

</>复制代码 
import axios from "axios";
import { message } from "antd";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import qs from "qs";
// 拦截所有有请求与回复
// Add a request interceptor
axios.interceptors.request.use(
  config => {
    NProgress.start();
    if (config.method != "get") {
      config.data = qs.stringify(config.data);
    }
    // withCredentials=true
    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
    return config;
  },
  error => {
    message.error("请求错误，请重试");
    return Promise.reject(error);
  }
);
// Add a response interceptor
axios.interceptors.response.use(
  response => {
    NProgress.done();
    if (response.data.RetCode === 101) {
      message.error(response.data.Message);
      return response;
    }
    if (response.data.RetCode === 100) {
      message.error(response.data.Message);
      return response;
    }
    return response;
  },
  error => {
    message.error("请求错误，请重试");
    NProgress.done();
    return Promise.reject(error);
  }
);
export default axios;

</>复制代码 
https://github.com/axios/axios

云服务器 GPU云服务器 js请求和返回数据请求参数返回数据成功 js+返回请求数据网络请求异常拦截

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100631.html

axios 的二次封装（拦截重复请求、异常统一处理）

摘要：拦截重复请求如何标识每个请求下面函数，通过一个请求参数中的请求传递参数或请求传递参数来表示每一个请求。一直想封装一下 axios，可以方便项目中使用，今天有时间，就好好研究了一下。源码： // util/axios.js import axios from axios const pending = {} const CancelToken = axios.CancelTok...

luzhuqun 2019-08-23 12:03 评论0 收藏0
axios入门实践

摘要：使用了拦截器处理相关问题，这样就不再需要使用来做错误的处理。万恶的拦截器一些处理无论是对成功的处理还是对失败的处理，如果拦截器不抛出错误，那么终将还会执行里面处理请求成功的函数，即使你返回。一前言本文适合刚接触axios或者使用过几次的同学来分享交流一些入门经验，本文同样适用熟悉axios的同学来作为参考手册。默认你已经看过axios的相关文档：axios文档 GitHub，通过...

kamushin233 2019-08-21 18:26 评论0 收藏0
Spring Boot + Vue 前后端分离开发，前端网络请求封装与配置

摘要：今天松哥就带大家来看看的使用。此时启动前端项目，就可以顺利发送网络请求了。松哥将自己封装的网络请求库已经放在上，欢迎大家参考。前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大...

Ku_Andrew 2019-05-23 11:48 评论0 收藏0
在Vue中如何使用axios请求拦截

摘要：很多初学者就会放弃使用拦截器，毕竟拦截器是可以不使用的，但是使用拦截器，会在页面中减少很多不必要的代码。三不使用请求拦截如果不使用请求拦截，也是可以的，但是会多了非常多的代码，我们以登录页为例。一、前言 axios的基础使用就不过多的讲解啦，如何使用可以看axios文档使用说明·Axios中文说明在这里和大家分享一下axios拦截在实际项目中的使用很多人都看过axios的官方文...

_Dreams 2019-08-23 12:31 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置文章目录项目目录结构介绍...

NotFound 2019-08-26 13:47 评论0 收藏0