您的位置:首页 > 理论基础 > 计算机网络

ReactNative 封装fetch网络请求

2018-03-01 17:36 525 查看
封装的fetch方法类

/**
* Created by 卓原 on 2017/11/14.
* zhuoyuan93@gmail.com
*/

/**
* 请求头
* @type {{Accept: string, Content-Type: string}}
*/
const header = {
'Accept': 'application/json',
'Content-Type': 'application/json',
};

/**
* 注意这个方法前面有async关键字
* @param url  请求地址
* @param body 请求参数
* @param method 请求方法 大写
* @param successCallBack  网络请求成功的回调
* @param errorCallBack    出错的回调
* @returns {Promise.<*>}
*/
export function requestUrl(url, method, body, successCallBack: func, errorCallBack: func) {
if ('GET' === method) {
get(url, body, successCallBack, errorCallBack);
}
else {
post(url, body, successCallBack, errorCallBack);
}
}

/**
* get请求
*/
async function get(url, body, successCallBack, errorCallBack) {

let str = toQueryString(body);
if (str && str.length > 0) url += '?' + str;
console.log(url);
try {
// 注意这里的await语句,其所在的函数必须有async关键字声明
let response = await fetch(url);
console.log('reqyestUrl:' + url);
let responseJson = await response.json();

return successCallBack(responseJson);
} catch (error) {
return errorCallBack(error);
//console.error(error);
}
}

/**
* post请求
*/
async function post(url, body, successCallBack, errorCallBack) {

try {
// 注意这里的await语句,其所在的函数必须有async关键字声明
let response = await fetch(url, {
method: 'POST',
headers: header,
body: JSON.stringify(body)
});

console.log('reqyestUrl:' + url);
let responseJson = await response.json();

return successCallBack(responseJson);
} catch (error) {
return errorCallBack(error);
}
}

/**
* 用于对对象编码以便进行传输
* @param obj 对象参数
* @returns {string} 返回字符串
*/
function toQueryString(obj) {
let str = '';
if (obj) {
let keys = [];
for (let key in obj) {
keys.push(key);
}
keys.forEach((key, index) => {
str += key + '=' + obj[key];
if (index !== keys.length - 1) {
str += '&';
}
});
}
return str;
}


使用方法:

(1)

import * as MyFetch from '../util/MyFetch';


(2)

fetch(url) {
MyFetch.requestUrl(url, 'GET', '',
result => {
console.log(result);
}, error => {
console.log(error);
})
}


第二种, 将fetch封装成类

/**
* Created by 卓原 on 2018/3/1.
* zhuoyuan93@gmail.com
*/

export default class HttpUtil {

static get(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then(result => {
resolve(result);
})
.catch(error => {
reject(error);
})
})
}

static post(url, data) {
return new Promise((resolve, reject) => {
fetch(url, {
method: 'POST',
header: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(result => {
resolve(result)
})
.catch(error => reject(error))
})
}

}


调用:

import HttpUtil from '../util/HttpUtil';

load(url) {
HttpUtil.get(url)
.then(result => {
this.setState({
data: result
});
console.log(this.state.data)
})
.catch(error => {
this.setState({
data: error
})
})
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: