React应用中的异步数据请求

huang-de-jun

已于 2022-10-16 16:18:26 修改

阅读量1.3k

点赞数 3

文章标签： react.js 前端前端框架

于 2022-10-16 13:52:39 首次发布

本文链接：https://blog.csdn.net/hdj0511/article/details/127346903

版权

React官方没有指定任何特定的异步请求技术，但是官方给的示例程序都是使用：fetch

1、fetch的基础使用

//使用fetch发起GET请求

let  url  =  '....'

fetch(url)

.then(response=>{

    response.json( )    //解析JSON响应

    .then(data=>clg(data))

    .catch(err=>clg(err))

})

.catch(err=>clg(err))

//使用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()

})()

},[ ] )