移动开发工程师-移动平台开发-React Native开发_ReactNative网络请求与数据处理.docxVIP

PAGE1

PAGE1

ReactNative网络请求基础

1使用fetch进行网络请求

在ReactNative中，fetch是一个内置的API，用于发起HTTP请求。它返回一个Promise，可以处理异步操作。下面是一个使用fetch进行GET请求的例子：

importReact,{useEffect,useState}fromreact;

import{View,Text}fromreact-native;

//组件

constFetchExample=()={

const[data,setData]=useState(null);

const[loading,setLoading]=useState(true);

const[error,setError]=useState(null);

useEffect(()={

constfetchData=async()={

try{

constresponse=awaitfetch(/data);

constjson=awaitresponse.json();

setData(json);

}catch(error){

setError(error);

}finally{

setLoading(false);

}

};

fetchData();

},[]);

if(error){

returnTextError:{error.message}/Text;

}

if(loading){

returnTextLoading.../Text;

}

return(

View

{data.map((item,index)=(

Textkey={index}{}/Text

))}

/View

);

};

exportdefaultFetchExample;

1.1代码解释

useEffect：ReactHook，用于在组件挂载后执行副作用操作。

fetch：发起GET请求到指定URL。

response.json()：将响应体转换为JSON格式。

setState：更新状态，触发组件重新渲染。

2处理异步操作与Promise

fetch返回的Promise可以处理异步操作。下面是一个使用Promise链处理异步操作的例子：

importReact,{useEffect,useState}fromreact;

import{View,Text}fromreact-native;

//组件

constPromiseExample=()={

const[data,setData]=useState(null);

const[loading,setLoading]=useState(true);

const[error,setError]=useState(null);

useEffect(()={

fetch(/data)

.then(response={

if(!response.ok){

thrownewError(Networkresponsewasnotok);

}

returnresponse.json();

})

.then(json={

setData(json);

})

.catch(error={

setError(error);

})

.finally(()={

setLoading(false);

});

},[]);

if(error){

returnTextError:{error.message}/Text;

}

if(loading){

returnTextLoading.../Text;

}

return(

View

{data.map((item,index)=(

Textkey={i