react--axios请求数据
时间:2019-04-15
本文章向大家介绍react--axios请求数据,主要包括react--axios请求数据使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
axios是独立的ajax插件,不依赖于react,在VUE中甚至原生JS开发的项目中也可以用,现在已经是前端主流的ajax插件。
首先安装axios npm install axios --save
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
以上是get和post请求的例子,区别是参数格式不一样,接下来我们在项目中请求下模拟数据
新增public/mock.json, pages/AxiosTest.js
public/mock.json内容
{
"code": 200,
"data": [
{"id": "1", "name": "张三", "grade": "大二"},
{"id": "2", "name": "李四", "grade": "大三"},
{"id": "3", "name": "王五", "grade": "大一"},
{"id": "4", "name": "赵六", "grade": "大二"}
]
}
pages/AxiosTest.js内容
import React from 'react';
import Axios from 'axios';
export default class AxiosTest extends React.Component {
constructor(props){
super(props);
this.state = {
data: []
}
}
componentWillMount(){
Axios.get('http://localhost:3000/mock.json', {})
.then(res => {
if(res.data.code === 200){
this.setState({data: res.data.data})
}
})
}
render(){
return(
<div>
{this.state.data ?
this.state.data.map(el => {
return (<p key={el.id}>{el.name} => {el.grade}</p>)
})
: null}
</div>
)
}
}
在路由配置中引入/AxiosTest.js
import React from 'react';
import {Switch, Route} from "react-router-dom";
import asyncComponent from '../lazy';
import Home2 from '../pages/Home2';
import OnePage from '../pages/OnePage';
import TwoPage from '../pages/TwoPage';
import This from '../pages/This';
import Mount from '../pages/Mount';
import HooksTest1 from '../hooks/test1';
import AxiosTest from '../pages/AxiosTest';
//import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState'));
const Routers = (
<Switch>
<Route path="/" exact component={Home2} />
<Route path="/onePage" component={OnePage} />
<Route path="/twoPage/:id" component={TwoPage} />
<Route path="/this" component={This} />
<Route path="/mount" component={Mount} />
<Route path="/hooksTest1" component={HooksTest1} />
<Route path="/axiosTest" component={AxiosTest} />
<Route path="/hooksUseState" component={HooksUseState} />
</Switch>
);
export default Routers
启动项目之后打开浏览器http://localhost:3000/#/axiosTest
很简单吧,需要注意的是react默认路径是public文件夹,所以要把mock.json放在这里,geturl不需要public文件路径 http://localhost:3000/mock.json
OK~ axios在项目中使用次数是相当高的,所以大部分开发人员会封装下在实际应用中引入封装好的axios配置就可以啦
新增axios/index.js
axios/index.js内容
/**
*
* ajax全局配置
*
*/
import axios from 'axios';
// axios 配置
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.get['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.delete['Content-Type'] = 'application/json'; //配置请求头
axios.defaults.headers.put['Content-Type'] = 'application/json'; //配置请求头
// 当实例创建时设置默认配置
axios.defaults.baseURL = 'http://localhost:3000';
//http request 拦截器
axios.interceptors.request.use((config) => {
// config.setHeaders([
// // 在这里设置请求头与携带token信息
// ]);
return config
}, (error) => {
return Promise.reject(error);
});
//http response 拦截器:返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
response => {
if (response.data.code === 40008) {
// 40008 说明 token 验证失败
// 可以直接跳转到登录页面,重新登录获取 token
window.location.reload();//刷新页面,如果该页面需要登录,则会自动跳转到登录页面
return {
code:12000,
message:"登录过时,退出请重新登录"
};
}
return response.data;
},
error => {
return Promise.reject(error.response) // 返回接口返回的错误信息
}
);
export default axios;
修改AxiosTest.js
import React from 'react';
import axios from '../axios';
export default class AxiosTest extends React.Component {
constructor(props){
super(props);
this.state = {
data: []
}
}
componentWillMount(){
axios.get('/mock.json', {})
.then(res => {
if(res.code === 200){
this.setState({data: res.data})
}
})
}
render(){
return(
<div>
{this.state.data ?
this.state.data.map(el => {
return (<p key={el.id}>{el.name} => {el.grade}</p>)
})
: null}
</div>
)
}
}
注意 封装的axios返回的是response.data 所以组件里调用res内部少了一层data,一定要注意,如果没成功页面也没提示请打断点或console仔细看打印的内容~
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 视图Nunjucks
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 代码分层
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ HTTP请求
- ubuntu中安装tomcat
- python文件操作
- Owasp测试4.0手册
- 推荐一款Web渗透测试数据库
- 【提莫】一个域名收集及枚举工具
- chmod: changing permissions of `/usr/local/bin/...
- a windows service with the name MYSQL already e...
- NameError: name 'admin' is not defined(彻底解决方案)
- Error: No module named blog
- ubuntu中的django安装配置与操作
- IOS开发之-搜索栏UISearchController详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL关于character_set 设置为uft8问题
- nohup 退出终端不退出任务
- windows 下Redis开机自启动
- 机器学习基础:决策树的可视化
- 持续部署入门:基于 Kubernetes 实现蓝绿发布
- PHP 实现Redis发布订阅消息及时通讯
- 简单几步,用云开发搞定短信验证码登录
- 重要的进程就让Supervisor 来守护吧!
- 机器学习基础:令你事半功倍的pipeline处理机制
- django 中如何将字典变量传给template视图层的JS
- Spring第三天:Spring的AOP的注解开发、Spring的声明式事务、JdbcTemplate
- Spring Boot中集成Slf4j 与Logback
- 一文搞定 Linux 常用高频命令
- 推荐一款科研必备的Python数据可视化神器——PyQtGraph
- 机器学习基础:可视化方式理解决策树剪枝