react-native 網絡請求,超時總結


react-native 網絡請求總結

參考:

[1] http://blog.csdn.net/u010046908/article/details/50916511

[2] https://github.com/facebook/react-native/issues/2556

[3] https://github.com/robinpowered/react-native-fetch-polyfill

react-native的網絡請求,總會遇到這樣,或者那樣的問題。這里我根據網上的資源,和自己的實踐經驗,總結下遇到的問題。

1. 使用哪種工具請求網絡?

目前react-native推薦的是fetch,XHttpRequest等工具。我自己用的fetch方法。

2. 如何用fetch請求http?

http請求主流的分getpost方式. 都可以在 fetch方法中設置.

2.1 get方式請求

 static get(url, callback) {
fetch(url)
.then((response) => response.text())
.then((responseText) => {
callback(JSON.parse(responseText));
})
.done();
}

代碼中對返回的response對象,直接調用Json.parse()方法可以解析。也可以調用response.tojson()方法。

2.2 post請求

這里,我直接采用參考文章寫的一個NetUtil.js工具類了,不過我們需要了解:請求時,我們可以設置響應的HTTP內容類型ContentType. 這個值,可以設置header的類型:application/json,application/x-www-form-urlencoded等(其實還有很多)。前者表示參數是json類型數據,后者表示參數是表單類型數據

'use strict';
import React, {
Component,
} from 'react-native';

class NetUitl extends React.Component {

//post請求
/**
*url :請求地址
*data:參數
*callback:回調函數
*/

static postForm(url, data, callback) {
var fetchOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded'
},
body:'data='+data+''//這里我參數只有一個data,大家可以還有更多的參數
};

fetch(url, fetchOptions)
.then((response) => response.json())
.then((responseData) => {
// 這里responseData就是一個可以用的json對象了。
callback(responseData);
}).catch(function(error) {
 callback(error, -1);
}
}

/**
*url :請求地址
*data:參數(Json對象)
*callback:回調函數
*/

static postJson (url, data, callback) {
var fetchOptions = {
method: 'POST',
headers: {
'Accept': 'application/json',
//json形式
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
};

fetch(url, fetchOptions)
.then((response) => response.json())
.then((responseData) => {
// 這里responseData就是一個可以用的json對象了。
callback(responseData);
}).catch(function(error) {
 callback(error, -1);
}
}
}

module.exports = NetUitl;

3. 調用方式如下:

get的調用方法

NetUtil.get("http://v.juhe.cn/weather/index?format="+format+"&key="+key+"&cityname="+cityname, function (result) {
// process result
})

2.3 postJson的調用

let data={'username':'123','password':'123456','token':'HSHSIHIFAUINNSNAFKSKJFNKFKFNFNFNK'};
NetUitl.postJson(url,,function (result){
// process result a json object
});

2.4 postForm的調用

let url = Global.LOGIN;
let formData = new FormData();
formData.append("id", id);
formData.append("username", username);
formData.put("
NetUitl.postForm(url,sx,function (result){
// process result
});

超時怎么辦?

目前也沒有很好的辦法解決超時,看網上很多方案都不可靠,主流的方式是拋棄這次http請求。用setTimeout() 方法,拋棄這次請求。我看到另外一種,引入一個[polyfill的文件]https://github.com/robinpowered/react-native-fetch-polyfill/blob/master/fetch-polyfill.js, 然后在自己的網絡請求方法里,采用它定義的fetch方法,就可以設置timeout參數。親測有效。

這是我自己的HttpUtils.js 工具類:

HttpUtils.js

  // 引入polyfill 解決不能設置超時的問題,直接把這個js文件拷到當前目錄。
// https://github.com/robinpowered/react-native-fetch-polyfill

import fetch from './fetch-polyfill';

console.warn("fetch url: " + url);
getData(url, callback) {

 fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
timeout: 20 * 1000
})
.then((response) => response.json())
.then((responseData) => {

console.warn("response code:" + responseData.code)
if(responseData.code === "C0000"
|| responseData.code === "1000"
|| responseData.code === 1000) {

console.warn("response:" + responseData.data);
callback(responseData.data, 0);
} else {
callback(responseData, -1);
}
})
.catch(error => {

// an error when the request fails, such as during a timeout
callback(null, -1);
})
;
}
}

module.exports = {
getData
}

使用方法:

let url = getUrls() + '&id=' + id;

SelfHttp.getData(url, "", (data, code) => {
console.warn("get data ....11111");
if(code === 0) {
// 處理data對象,取決你返回的json格式
} else {
// 顯示錯誤界面
}
}

希望對你的react-native之旅有幫助。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com