1、前言
最近學(xué)習(xí)RN進(jìn)行到了網(wǎng)絡(luò)請(qǐng)求這一塊俺驶，便花了點(diǎn)時(shí)間把網(wǎng)絡(luò)請(qǐng)求封裝了一下纤房，這樣使用起來也方便
2却嗡、結(jié)構(gòu)
- Connect.js 對(duì)NetUtils的二次封裝舶沛，將地址添加進(jìn)來，統(tǒng)一管理網(wǎng)絡(luò)請(qǐng)求
- NetAddr.js 請(qǐng)求地址的存放
-
NetUtils.js get, post,圖片上傳的封裝
image.png
3窗价、代碼
- NetUtils.js代碼里都有注釋
export default class NetUtils{
/**
* GET 請(qǐng)求
*/
static get(url, params, success, fail, error){
if (params) {
let paramsArray = [];
//拼接參數(shù)
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 請(qǐng)求
fetch(url,{
headers:{
//看后臺(tái)需求決定配置參數(shù),例如我們后臺(tái)要求將appId放在這里請(qǐng)求
// appId: '1234345656'
},
})
.then(response=>response.json())//把response轉(zhuǎn)為json
.then(responseJson=> { // 拿到上面的轉(zhuǎn)好的json
console.log(responseJson) // 打印返回結(jié)果
if (responseJson.code == 200){ // 200為請(qǐng)求成功
success && success(responseJson.data)
}else {
fail && fail(responseJson.msg)//可以處理返回的錯(cuò)誤信息
}
})
.catch(e=>{
console.log(e)
error && error(e)
})
}
/**
* POST 請(qǐng)求如庭，經(jīng)測(cè)試用FormData傳遞數(shù)據(jù)也可以
*/
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轉(zhuǎn)為json
.then(responseJson=> { // 拿到上面的轉(zhuǎn)好的json
console.log(responseJson) // 打印返回結(jié)果
if (responseJson.code == 200){ // 200為請(qǐng)求成功
success && success(responseJson.data)
}else {
fail && fail(responseJson.msg)//可以處理返回的錯(cuò)誤信息
}
})
.catch(e=>{
console.log(e)
error && error(error)
})
}
/**
* @images uri數(shù)組
* @param FormData格式,沒有參數(shù)的話傳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'//用時(shí)間戳保證名字的唯一性
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轉(zhuǎn)為json
.then(responseJson=> { // 拿到上面的轉(zhuǎn)好的json
console.log(responseJson) // 打印返回結(jié)果
if (responseJson.code == 200){ // 200為請(qǐng)求成功
success && success(responseJson.data)
}else {
fail && fail()//可以處理返回的錯(cuò)誤信息
}
})
.catch(e=>{
console.log(e)
error && error(error)
})
}
}
- NetAddr.js
var host = 'http://192.168.0.70:8080'
var NetAddr = {
// 個(gè)人信息
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{
/**
* 個(gè)人信息接口
*/
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請(qǐng)求撼港，無參數(shù)
getCustomerInfo() {
Connect.getCustomerInfo(response=>{
console.log(response)
})
}
//post請(qǐng)求坪它，參數(shù)為FormData形式
postMyOrderList() {
let params = new FormData()
params.append('pageIndex',1)
params.append('status',0)
Connect.postMyOrderList(params,response=>{
console.log(response)
})
//參數(shù)json形式
//Connect.postMyOrderList({'pageIndex': 1, 'status': 0},response=>{
// console.log(response)
//})
}
//圖片上傳，photos為圖片地址數(shù)組
uploadImage() {
Connect.uploadImageFile(photos,null);
}
請(qǐng)求結(jié)果展示
image.png
5帝牡、擴(kuò)展
fetch網(wǎng)絡(luò)請(qǐng)求是沒有超時(shí)處理的往毡，如果需要加上timeout，請(qǐng)參考
讓fetch也可以timeout
[React Native 網(wǎng)絡(luò)請(qǐng)求封裝：使用Promise封裝fetch請(qǐng)求]
6靶溜、結(jié)束語
至此網(wǎng)絡(luò)請(qǐng)求封裝與使用都完成了开瞭，有什么問題歡迎留言探討，如果對(duì)你有幫助或者你喜歡的話罩息，給個(gè)贊吧??嗤详！
