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

目录

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;ivar 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、结束语

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