React 前端请求

Amumu121382026-01-11 11:36

React 前端请求

一、前置说明

React本身只关注界面,并不包含发送ajax请求代码
前端应用需要通过ajax/fetch请求与后台进行交互
React应用中需要集成第三方ajax库或自己封装

二、常用ajax请求库

1、jQuery: 比较重,如果需要另外引入,不建议在前端框架中使用

2、axios: 轻量级,建议使用

复制代码

2.1 封装XHR对象ajax
2.2 promise风格,可以通过async/await简化异步操作
2.3 可以在浏览器和node服务端使用

三、axios用例

get请求

javascript 复制代码

axios.get('user?id=amumu12138').then(res => {
	// success todo
}).catch(err => {
	// error todo
})

post请求

javascript 复制代码

axios.post('/user', {
	name: 'amumu',
	id: '12138'
}).then(res => {
	// success todo
}).catch(err => {
	// error todo
})

四、fetch扩展

1、特点

复制代码

1.1 原生函数,不再使用XHR对象提交ajax请求
1.2 老版本浏览器可能不支持

2、使用

javascript 复制代码

const fetchFunc = async () => {
	try {
		const res = await fecth(url, method:{'get'})
		const data = await res.json()
	} catch(err) {
		// error todo
	}
}