React官方没有指定任何特定的异步请求技术,但是官方给的示例程序都是使用:fetch
1、fetch的基础使用
//使用fetch发起GET请求 | //使用fetch发起POST请求 let url = '....' let options = { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded'}, body: 'k1=v1&k2=v2' //不能是对象 } fetch(url, options) .then(response=>{ response.json( ) //解析JSON响应 .then(data=>clg(data)) .catch(err=>clg(err)) }) .catch(err=>clg(err)) |
2、对fetch进行二次封装
目标1:对所有的请求地址(协议+主机名+端口)统一管理,整个项目中只出现一次
目标2:对底层AJAX具体实现技术进行封装屏蔽
目标3:对横切关注点(前置-权限校验/后置-操作日志/环绕-耗时统计)进行统一管理
1、fetch的二次封装
@/service/index.js
export let base = 'http://www.codeboy.com:9999/mfresh/'
let bodyOptions = {method:'POST', headers:{'Content-Type':'....'}}
export let newsSelect = async function(){
let url = base + 'data/news_select.php'
let options = {...bodyOptions, body: 'k1=v1&k2=v2&...'}
//showLoading()
let res = await + fetch(url, options)
let data = await res.json()
//hideLoading()
return data
}
@/pages/Home.js
useEffect( ()=>{
(async ()=>{
let data = await newsSelect()
})()
},[ ] )