本文只要介绍如何在项目中把react和axios结合起来使用,想了解更多关于axios详细知识以及api,可以到官网查看 https://www.npmjs.com/package/axios

首先安装 axios

$npm install axios  或  $yarn install axios

代码中引入axios

import axios from 'axios';

写一个拦截所有请求的axios全局拦截器

import axios from 'axios';
import globalCode from '../constants/globalCode';
import { Toast } from 'antd-mobile';
import {createHashHistory} from 'history';
import commonInfo from '../common/CommonInfo'; const instance = axios.create({
//当创建实例的时候配置默认配置
xsrfCookieName: 'xsrf-token'
}); //添加请求拦截器
instance.interceptors.request.use(function(config){
//在发送请求之前做某事,比如加一个loading
if(commonInfo.hasLoading){
Toast.loading('', 3);
} return config;
},function(error){
//请求错误时做些事
Toast.hide();
return Promise.reject(error);
}); //添加一个响应拦截器
instance.interceptors.response.use(function (response) {
// 1.成功
if (response.data.success && response.data.messageCode === globalCode.success) {
if(commonInfo.hasLoading){
Toast.hide();
}
return response.data.data;
} // 2.session过期
if (!response.data.success && response.data.messageCode === globalCode.timeout) {
Toast.hide();
Toast.info("会话过期,请重新登录", 1);
createHashHistory().push('/login'); // 定义一个messagecode在后面会用到
return Promise.reject({
messageCode: 'timeout'
})
} // 3.11111111 系统异常、网络异常
if (response.data.success && response.data.messageCode === globalCode.busyCode) {
Toast.hide();
Toast.info(response.data.message, 1);
return Promise.reject({
messageCode: 'netError'
})
} // 3.其他失败,比如校验不通过等
return Promise.reject(response.data);
}, function () {
Toast.hide();
// 4.系统错误,比如500、404等
Toast.info('系统异常,请稍后重试!', 1);
return Promise.reject({
messageCode: 'sysError'
});
}); export default instance;

引用 axios 的 instance 实例

mport API from '../../config/api';
import instance from '../utils/axiosCore'; // PS:此处如果对请求参数格式有疑问的可以查看官网资料,此处就不一一做详细解释了
// get
export const login = (params) => {
return instance.get(API.LOGIN_API, { params: params });
}; // post
export const getConsultant = (params) => {
return instance.post(API.GET_CONSULTANT_API, params);
};

发送请求并处理请求返回数据

import { login } from '../../models/loginModel';

login = () => {
let params = {
username: "admin",
password: "123456"
}; login (params).then((data) => {
//此处为正常业务数据的处理 }, (data) => {
if (data.messageCode !== 'netError' && data.messageCode !== 'sysError' && data.messageCode !== 'timeout') {
//此处是对除了以上几个系统异常意外的业务异常的处理
Toast.info(data.message, commonInfo.showToastTime);
}
});
}; // 一次性并发多个请求
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))

到此,就是一个完整的从请求发送->拦截请求->请求响应->拦截响应->处理返回数据。

上面的apis 文件可以用下面的方法写

封装一个匿名函数返回一个apis对象,通过apis对象的键名去获取对应的api地址

// 集中管理路由,所有的接口地址:
// 1.整个应用用到了哪些接口一目了然
// 2.接口地址可能变化,方便管理

const prefix = '' // api地址前缀
export default(config => {
return Object.keys(config).reduce((copy, name) => {
copy[name] = `${prefix}$config[name]`
return copy
})
})({
// example api
"getExampleData": "/api/example/data"
})

文件最终返回一个对象

// api对象
{
getExampleData: '/api/example/data'
}

react + axios实践的更多相关文章

  1. [转] React 最佳实践——那些 React 没告诉你但很重要的事

    前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中 ...

  2. React最佳实践(1)

    React最佳实践不敢妄谈,但最差实践非知乎莫属. 旧版知乎看起来土了点,但体验流畅,起码用起来舒服. 新版知乎看起来UI现代化,技术实现上采用了React,但是可能因为知乎缺钱,请不起高水平的前端工 ...

  3. react项目实践——(1)使用webpack创建项目

    1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...

  4. react axios 跨域问题

    周末又是补充知识点的时候了,用了react axios 跨越问题,貌似是要比vue 稍微麻烦一点 它请求http好像是没有问题的,但是https还是有跨域问题的, 我用的刚好是create-react ...

  5. react axios 跨域访问一个或多个域名

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...

  6. iShow UI for React 最佳实践

    React 与 AJAX React只负责处理View这一层,它本身不涉及网络请求/AJAX,所以这里我们需求考虑两个问题: 第一,用什么技术从服务端获取数据: 第二,获取到的数据应该放在react组 ...

  7. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  8. [转] Immutable 详解及 React 中实践

    https://zhuanlan.zhihu.com/p/20295971 作者:camsong链接:https://zhuanlan.zhihu.com/p/20295971来源:知乎著作权归作者所 ...

  9. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

随机推荐

  1. win10应用商店打不开,错误代码0x80131500

    我也突然遇到这个问题,一开始找各种方法也解决不了.然后在外网找到方法. 很多人只是把代理开了,只要关了就可以了.这点不累述,都会提到. 我的win10应用商店有两个错误代码0x80131500和0x8 ...

  2. Django+Vue打造购物网站(七)

    个人中心功能开发 drf文档注释 http://www.django-rest-framework.org/topics/documenting-your-api/ 动态设置serializer和pe ...

  3. Vivado2016旧工程IP移动到新工程

    前言 在VIVADO中图形化界面生成IP,在旧工程中使用后,如果想在新的工程中使用这个IP但又不想再次生成一次,则就需要把就旧工程中的IP导入到新工程中. 流程 1.旧工程IP生成的目录如下,IP为C ...

  4. spring boot junit controller

    MockMvc 来自Spring Test,它允许您通过一组方便的builder类向 DispatcherServlet 发送HTTP请求,并对结果作出断言.请注意,@AutoConfigureMoc ...

  5. fzyzojP1635 -- 平均值

    做法大概有两种: 1.二分平均值,每个值减去平均值,求有没有一个区间的总和大于等于0 (类比,中位数是二分之后,比mid大的为1,小的为0,看有没有区间大于等于0这样) 最值问题——判定问题 单调队列 ...

  6. org.hibernate.ObjectNotFoundException: No row with the given identifier exists解决办法

    hibernate-取消关联外键引用数据丢失抛异常的设置@NotFound hibernate项目里面配了很多many-to-one的关联,后台在查询数据时已经作了健全性判断,但还是经常抛出对象找不到 ...

  7. ZooKeeper-集群模式安装

    下载地址:https://zookeeper.apache.org/releases.html 至少需要准备三台节点(这里为h136.h138.h140),ZooKeeper 需要 JDK,关于 JD ...

  8. 快速定位XPATH

    本文主要介绍如何快速定位WEB端的xpath. 浏览器:Chrome.火狐浏览器 两种浏览器的定位方法都是一样:按F12键,可查看开发者工具 上图,开发者工具最左上角是定位按钮,点击此按钮,再点击浏览 ...

  9. 第四节:跨域请求的解决方案和WebApi特有的处理方式

    一. 简介 前言: 跨域问题发生在Javascript发起Ajax调用,其根本原因是因为浏览器对于这种请求,所给予的权限是较低的,通常只允许调用本域中的资源, 除非目标服务器明确地告知它允许跨域调用. ...

  10. Design Principles and Design Patterns

    设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...