本文只要介绍如何在项目中把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. 怎样在ISE14.7中固化FLASH文件

    前言 当工程开发完成后,bit文件类型掉电后会消失,而此时采用FLASH固化就很重要了. 软件版本:ISE14.7 流程 1.对生成FLASH文件进行设置:配置速率为33,选择66貌似配置失败,中庸之 ...

  2. IIS运行一段时间不响应的解决方法

    查找事件记录,提示为应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制 解决方案: Internet 信息服务(IIS)管理器->应用程序池->DefaultA ...

  3. 13-jQuery的ajax

    什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页 ...

  4. Python变量命名规范

    模块名: 小写字母,单词之间用_分割 ad_stats.py 包名: 和模块名一样 类名: 单词首字母大写 AdStats ConfigUtil 全局变量名(类变量,在java中相当于static变量 ...

  5. Docker:dockerfile自动构建镜像 [六]

    一.手动docker镜像的缺点 相对于手动制作的docker镜像,使用dockerfile构建的镜像有以下优点: 1.dockerfile只有几kb,便于传输 2.使用dockerfile构建出来的镜 ...

  6. Docker:容器间互联的应用zabbix监控项目 [十]

    一.docker容器间的互联 1.创建两个容器 [root@luoahong ~]# docker run -d --name luoahong httpd:latest 8f771f043391e7 ...

  7. Connection to Oracle failed. [66000][12505] Listener refused the connection with the following error: ORA-12505, TNS:listener does not currently know of SID given in connect descriptor .

    我安装了Oracle数据库,默认的数据库用户名是system,密码口令是安装过程中你自己设置的.可以先使用命令框,输入 sqlplus system; 然后再输入密码即可. 然后我的数据库连接工具使用 ...

  8. 基于alpine制作php镜像

    alpine包搜索https://pkgs.alpinelinux.org/ 安装依赖库 apk add --no-cache xxx 可以基于php apline镜像自行增加或删除扩展. https ...

  9. LFYZ-OJ ID: 1026 数的计数(数的计算)NOIP2001

    数的计算(数的计数) 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n).先输入一个自然数n(n<=1000),然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上 ...

  10. Docker下安装GitLab

    1.需要先安装Docker和Docker Compose,参考:https://www.cnblogs.com/hackyo/p/9280042.html 2.配置GitLab SSL(可跳过): m ...