ReactNative fetch网络请求封装(GET,POST,图片上传)

目录

目录

1前言

2结构

3代码

4使用

5扩展

6结束语

1、前言

最近学习RN进行到了网络请求这一块，便花了点时间把网络请求封装了一下，这样使用起来也方便

2、结构

Connect.js 对NetUtils的二次封装，将地址添加进来，统一管理网络请求

NetAddr.js 请求地址的存放

NetUtils.js get, post,图片上传的封装

3、代码

NetUtils.js代码里都有注释

export default class NetUtils{
/**
*  GET 请求
*/
static get(url, params, success, fail, error){
if (params) {
let paramsArray = [];
//拼接参数
Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
if (url.search(/\?/) === -1) {
url += '?' + paramsArray.join('&')
} else {
url += '&' + paramsArray.join('&')
}
}
console.log(url, params)
// fetch 请求
fetch(url,{
headers:{
//看后台需求决定配置参数,例如我们后台要求将appId放在这里请求
// appId: '1234345656'
},
})
.then(response=>response.json())//把response转为json
.then(responseJson=> { // 拿到上面的转好的json
console.log(responseJson) // 打印返回结果
if (responseJson.code == 200){ // 200为请求成功
success && success(responseJson.data)
}else {
fail && fail(responseJson.msg)//可以处理返回的错误信息
}
})
.catch(e=>{
console.log(e)
error && error(e)
})
}

/**
*  POST 请求，经测试用FormData传递数据也可以
*/
static post(url, params, success, fail, error){
console.log(url,params)
fetch(url,{
method: 'POST',
headers:{
'Accept': 'application/json',
//媒体格式类型key/value格式
'Content-Type': 'application/x-www-form-urlencoded',
},
body: JSON.stringify(params)
}) .then(response=>response.json())//把response转为json
.then(responseJson=> { // 拿到上面的转好的json
console.log(responseJson) // 打印返回结果
if (responseJson.code == 200){ // 200为请求成功
success && success(responseJson.data)
}else {
fail && fail(responseJson.msg)//可以处理返回的错误信息
}
})
.catch(e=>{
console.log(e)
error && error(error)
})
}
/**
*  @images uri数组
*  @param  FormData格式,没有参数的话传null
*/
static uploadFile(url,images, params, success, fail, error){
console.log(url,images)
let formData = new FormData();
if (params){
formData = params;
}
for(var i = 0;i<images.length;i++){
var uri = images[I]
var date = new Date()
var name = date.getTime() + '.png'//用时间戳保证名字的唯一性
let file = {uri: uri, type: 'multipart/form-data', name: name}
formData.append('file', file)
}
console.log(url,formData)
fetch(url,{
method: 'POST',
headers:{
'Accept': 'application/json',
//媒体格式类型key/value格式
'Content-Type':'multipart/form-data',
customerId: customerId,
appId: appId
},
body: formData
}) .then(response=>response.json())//把response转为json
.then(responseJson=> { // 拿到上面的转好的json
console.log(responseJson) // 打印返回结果
if (responseJson.code == 200){ // 200为请求成功
success && success(responseJson.data)
}else {
fail && fail()//可以处理返回的错误信息
}
})
.catch(e=>{
console.log(e)
error && error(error)
})
}
}

NetAddr.js

var host = 'http://192.168.0.70:8080'

var NetAddr = {
// 个人信息
customerInfo: host + '/Shop/CustomerInfo',
// 我的订单列表
myOrderList: host + '/Shop/MyOrderList',
// 上传图片
upLoadImage: host + '/Resource/UploadImage'
}

module.exports = NetAddr

Connect.js

import NetUtils from './NetUtils'
import NetAddr from './NetAddr'

export default class Connect{
/**
*  个人信息接口
*/
static getCustomerInfo(success){
NetUtils.get(NetAddr.customerInfo, null,response=>{
success && success(response)
})
}

/**
*  我的订单列表
*/
static  postMyOrderList(params, success){
NetUtils.post(NetAddr.myOrderList, params, response=>{
success && success(response)
})
}

/**
*  上传图片
*/
static uploadImageFile(images, params, success){
NetUtils.uploadFile(NetAddr.upLoadImage, images, params, response=>{
success && success(response)
})
}
}

4、使用

//引入Connect
import Connect from '../../public/net/Connect'

//get请求，无参数
getCustomerInfo() {
Connect.getCustomerInfo(response=>{
console.log(response)
})
}
//post请求，参数为FormData形式
postMyOrderList() {
let params = new FormData()
params.append('pageIndex',1)
params.append('status',0)
Connect.postMyOrderList(params,response=>{
console.log(response)
})
//参数json形式
//Connect.postMyOrderList({'pageIndex': 1, 'status': 0},response=>{
//    console.log(response)
//})
}
//图片上传，photos为图片地址数组
uploadImage() {
Connect.uploadImageFile(photos,null);
}

请求结果展示

5、扩展

fetch网络请求是没有超时处理的，如果需要加上timeout，请参考

让fetch也可以timeout

[React Native 网络请求封装：使用Promise封装fetch请求]

6、结束语

至此网络请求封装与使用都完成了，有什么问题欢迎留言探讨，如果对你有帮助或者你喜欢的话，给个赞吧♥️！