react多个网络请求_React Native 网络请求方法

前言

React Native逻辑部分使用javascript引擎作为支撑，因此，原则上我们可以使用ServerSent、Ajax、WebSocket请求以及ES6。

Fetch网络请求

Fetch是为了改善Ajax处理逻辑而推出新的请求api，具体使用请参考(Using Fetch Api)

要从任意地址获取内容的话，只需简单地将网址作为参数传递给fetch方法即可(fetch这个词本身也就是【获取】的意思)：

fetch('https://mywebsite.com/mydata.json')

Fetch还有可选的第二个参数，可以用来定制HTTP请求一些参数。你可以指定header参数，或是指定使用POST方法，又或是提交数据等等：

fetch('https://mywebsite.com/endpoint/', {

method: 'POST',

headers: {

'Accept': 'application/json',

'Content-Type': 'application/json',

},

body: JSON.stringify({

firstParam: 'yourValue',

secondParam: 'yourOtherValue',

})

})

此外，下载图片也是可以的

var myImage = document.querySelector('img');

fetch('flowers.jpg').then(function(response) {

return response.blob();

}).then(function(myBlob) {

var objectURL = URL.createObjectURL(myBlob);

myImage.src = objectURL;

});

提交数据的格式关键取决于headers中的Content-Type。Content-Type有很多种，对应body的格式也有区别。到底应该采用什么样的Content-Type取决于服务器端，所以请和服务器端的开发人员沟通确定清楚。常用的'Content-Type'除了上面的'application/json'，还有传统的网页表单形式，示例如下：

fetch('https://mywebsite.com/endpoint/', {

method: 'POST',

headers: {

'Content-Type': 'application/x-www-form-urlencoded',

},

body: 'key1=value1&key2=value2'

})

可以参考Fetch请求文档来查看所有可用的参数。

处理服务器的响应数据

上面的例子演示了如何发起请求。很多情况下，你还需要处理服务器回复的数据。

网络请求天然是一种异步操作(译注：同样的还有asyncstorage，请不要再问怎样把异步变成同步！无论在语法层面怎么折腾，它们的异步本质是无法变更的。异步的意思是你应该趁这个时间去做点别的事情，比如显示loading，而不是让界面卡住傻等)。Fetch 方法会返回一个Promise，这种模式可以简化异步风格的代码(译注：同样的，如果你不了解promise，建议使用搜索引擎补课)：

getMoviesFromApiAsync() {

return fetch('https://facebook.github.io/react-native/movies.json')

.then((response) => response.json())

.then((responseJson) => {

return responseJson.movies;

})

.catch((error) => {

console.error(error);

});

}

你也可以在React Native应用中使用ES7标准中的async/await 语法：

// 注意这个方法前面有async关键字

async getMoviesFromApi() {

try {

// 注意这里的await语句，其所在的函数必须有async关键字声明

let response = await fetch('https://facebook.github.io/react-native/movies.json');

let responseJson = await response.json();

return responseJson.movies;

} catch(error) {

console.error(error);

}

}

别忘了catch住fetch可能抛出的异常，否则出错时你可能看不到任何提示。

Ajax网络请求

React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax)。一些基于XMLHttpRequest封装的第三方库也可以使用，例如frisbee或是axios等。但注意不能使用jQuery，因为jQuery中还使用了很多浏览器中才有而RN中没有的东西(所以也不是所有web中的ajax库都可以直接使用)。

var request = new XMLHttpRequest();

request.onreadystatechange = (e) => {

if (request.readyState !== 4) {

return;

}

if (request.status === 200) {

console.log('success', request.responseText);

} else {

console.warn('error');

}

};

request.open('GET', 'https://mywebsite.com/endpoint/');

request.send();

需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

WebSocket网络交互

React Native还支持WebSocket，这种协议可以在单个TCP连接上提供全双工的通信信道。WebSocket还有一个优势是，它自动支持跨域。

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {

// 打开一个连接

ws.send('something'); // 发送一个消息

};

ws.onmessage = (e) => {

// 接收到了一个消息

console.log(e.data);

};

ws.onerror = (e) => {

// 发生了一个错误

console.log(e.message);

};

ws.onclose = (e) => {

// 连接被关闭了

console.log(e.code, e.reason);

};

axios框架

axios基于ajax，和fetch功能类似，主要解决代码逻辑结构和深层嵌套问题，她还有个优点是比fetch兼容性强。使用时需要引入axios.js或者axios.min.js

发送get请求

// Make a request for a user with a given ID

axios.get('/user?ID=12345')

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

// Optionally the request above could also be done as

axios.get('/user', {

params: {

ID: 12345

}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

发送post请求

axios.post('/user', {

firstName: 'Fred',

lastName: 'Flintstone'

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

并发请求

function getUserAccount() {

return axios.get('/user/12345');

}

function getUserPermissions() {

return axios.get('/user/12345/permissions');

}

axios.all([getUserAccount(), getUserPermissions()])

.then(axios.spread(function (acct, perms) {

// Both requests are now complete

}));

扩展模块

React Native具有很高可扩展性，本身类似一个适配器，对于自己特殊的需求，可以通过扩展模块，即插即用。

在Android中我们需要实现ReactContextBaseJavaModule规范，我们可以使用的Android网络框架很多，如okhttp,xutils,httpclient等；在iOS平台，需要实现RCTBridgeModule协议，可以使用系统网络框架NSURLSession ，也可以使用AFNetwork 3.0以及其衍生框架。

这里具体实现我们就不在赘述，在后期的博客中加以说明。

结束语

本篇文章写于2017年12月31日23点11分，是本年度的最后一篇文章，此刻，祝福大家“新年快乐——Happy New Year ”。