前言
作为前端开发人员，网络请求工具对大家来说肯定不陌生。iOS的AFNetworking，Android的okHttp等。但是对于RN来说，我们最常用到的就是js原生的Fetch请求了。下面的这篇文章我们主要就是来聊聊Fetch请求的简单使用以及如何封装一个fetch网络请求组件和缓存策略。
直接查看作者fetch请求组件源码请点击：https://github.com/guangqiang-liu/react-native-fetch-demo
什么fetch
fetch 是由 whatag 负责研发。与 Ajax 不同的是，它的 API 不是事件机制，而是采用目前流行的 Promise(MDN Promise) 方式处理
查看ReactNatie官方对于fetch的讲解请点击：http://reactnative.cn/docs/0.49/network.html#content
fetch请求的格式
fetch(url, init)
.then((response) => { // 数据解析方式
})
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done(); // 结束链式
在上面的示例中init是一个对象，对象中包含如下属性：
- method：网络请求的方式(GET、POST等)
- headers：网络请求的请求头对象，对象中包含(Accept、Content-Type、token等属性)
- body：POST请求的请求体对象，即需要往服务器发送的数据
- mode：跨域设置(cors, no-cors, same-origin) 不常用
- cache：缓存选项（default, no-store, reload, no-cache, force-cache, or only-if-cached）不常用
response 对象可以有如下几种解析方式：
- json()
- text()
- arrayBuffer()
- blob()
- formData()
如何使用fetch
GET请求
fetch(url, {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
.then((response) => response.json()) // json方式解析，如果是text就是response.text()
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done()
POST请求
fetch(url, {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
body: JSON.stringify({key1: value1, key2: value2})
})
.then((response) => { // 数据解析方式
})
.then((responseData) => { // 获取到的数据处理
})
.catch((error) => { // 错误处理
})
.done()
作者封装的fetch请求组件核心源码如下
/**
* FetchNetworkDemo
* 作者Git：https://github.com/guangqiang-liu
* 技术交流群：620792950
* 作者QQ：1126756952
* @guangqiang
*/
/** 基于fetch 封装的网络请求工具类 **/
import {Component} from 'react'
/**
* fetch 网络请求的header，可自定义header 内容
* @type {{Accept: string, Content-Type: string, accessToken: *}}
*/
let header = {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
/**
* GET 请求时，拼接请求URL
* @param url 请求URL
* @param params 请求参数
* @returns {*}
*/
const handleUrl = url => params => {
if (params) {
let paramsArray = []
Object.keys(params).forEach(key => paramsArray.push(key + '=' + encodeURIComponent(params[key])))
if (url.search(/\?/) === -1) {
typeof (params) === 'object' ? url += '?' + paramsArray.join('&') : url
} else {
url += '&' + paramsArray.join('&')
}
}
return url
}
/**
* fetch 网络请求超时处理
* @param original_promise 原始的fetch
* @param timeout 超时时间 30s
* @returns {Promise.<*>}
*/
const timeoutFetch = (original_fetch, timeout = 30000) => {
let timeoutBlock = () => {}
let timeout_promise = new Promise((resolve, reject) => {
timeoutBlock = () => {
// 请求超时处理
reject('timeout promise')
}
})
// Promise.race(iterable)方法返回一个promise
// 这个promise在iterable中的任意一个promise被解决或拒绝后，立刻以相同的解决值被解决或以相同的拒绝原因被拒绝。
let abortable_promise = Promise.race([
original_fetch,
timeout_promise
])
setTimeout(() => {
timeoutBlock()
}, timeout)
return abortable_promise
}
/**
* 网络请求工具类
*/
export default class HttpUtils extends Component {
/**
* 基于fetch 封装的GET 网络请求
* @param url 请求URL
* @param params 请求参数
* @returns {Promise}
*/
static getRequest = (url, params = {}) => {
return timeoutFetch(fetch(handleUrl(url)(params), {
method: 'GET',
headers: header
})).then(response => {
if (response.ok) {
return response.json()
} else {
alert(response)
}
}).then(response => {
// response.code：是与服务器端约定code：200表示请求成功，非200表示请求失败，message：请求失败内容
if (response) {
return response
} else {
// 非 200，错误处理
// alert(response.message)
return response
}
}).catch(error => {
alert(error)
})
}
/**
* 基于fetch 的 POST 请求
* @param url 请求的URL
* @param params 请求参数
* @returns {Promise}
*/
static postRequrst = (url, params = {}) => {
return timeoutFetch(fetch(url, {
method: 'POST',
headers: header,
body: JSON.stringify(params)
})).then(response => {
if (response.ok) {
return response.json()
} else {
alert('服务器繁忙，请稍后再试；\r\nCode:' + response.status)
}
}).then(response => {
// response.code：是与服务器端约定code：200表示请求成功，非200表示请求失败，message：请求失败内容
if (response && response.code === 200) {
return response
} else {
// alert(response.message)
return response
}
}).catch(error => {
alert(error)
})
}
}
作者的fetch网络请求组件涵盖如下功能：
- 发送GET网络请求
- 发送POST网络请求
- GET请求数据缓存策略
- 请求超时处理
fetch网络请求组件待完成事项：
- 文件、图片网络上传
- 文件下载
- 待补充
总结
总之使用fetch发送网络请求还是挺简单的。fetch请求中使用到promise对象和函数柯里化概念。如果同学们对于promise和柯里化不是很熟悉，建议先了解下概念及使用方法。建议同学们直接下载作者的fetch请求组件源码进行调试学习。fetch请求组件源码地址：https://github.com/guangqiang-liu/react-native-fetch-demo。 如果感觉文章对你有帮助，请给个 star 关注 谢谢。
福利时间
- 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
- 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
- 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
- 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！
