uni-app网络封装思路分享

在之前无论是iOS、Android开发，还是后来的flutter开发时网络请求类都是需要我们自己做一层封装的，如果不封装那么我们会面临几个不便：

• 请求头每次网络请求都要单独设置
• 返回数据的正确性判断每次都要重复大量代码
• 返回数据格式有变化需要修改所有网络请求的地方

针对这些问题我简单做了一下封装，大概解决了以上三个问题

一、首先在项目根目录新建文件夹libs，然后文件夹中新建netRequest.js

import Vue from 'vue'
//静态资源们
const baseInfo = {
    //网络请求的地址
    baseUrl: 你自己的网络baseUrl,
    //网络请求错误的统一报错
    netWrong: '请检查网络',
}

//网络请求对象
export const netRequest = {
    
    //登录成功时将获取的token通过这个key存储起来，以后取值也是使用这个key
    tokenKey: 'tokenKey', 
    
    //登录地址
    requestLoginProcessAction: baseInfo.baseUrl+'/a/wws/ssys/lg',
    
    //请求方式GET\POST
    method: {
        'GET':'GET',
        'POST':'POST'
    },
    
    //不同接口编码格式不同，根据不同接口设置编码格式 
    contentType: {
        'json':'application/json;charset=UTF-8',
        'urlencoded':'application/x-www-form-urlencoded'
    },
    
    getHeaders: function(type){
        //如果不设置Content-Type那么默认为application/json;charset=UTF-8
        var cType = 'application/json;charset=UTF-8';
        if(type){//以设置的Content-Type为准
            cType = type;
        }
        
        let _headers = {
            "os": "ios", 
            "version": "1.0.0", 
            "appname": "QQ",
            "Content-Type": cType
        };
        
        //如果当前已经登录，那么在请求头设置token，否则不设置token
        const token = uni.getStorageSync(netRequest.tokenKey);
        if(token){
            console.log('token='+token);
            Vue.set(_headers,'cookie',token)
            //也可以使用Object.assign方式实现动态添加属性
            // _headers = Object.assign({},_headers,{'cookie':token})
        }else{
            console.log('token为空');
        }       
        return _headers;
    },
    
    //处理网络请求返回的数据，如果成功则返回解析的数据，如果不成功则返回错误信息
    isSucc: function(response,succ,fail){
        if(response){
            if(response.statusCode===200){
                if(response.data.statusCode===200){
                    if(succ && typeof(succ)=='function'){
                        succ(response.data.data)
                    }
                }else if(response.data.statusCode===401){//用户未登录，token超时
                    //登录超时，一般需要弹出登录页面，让用户重新登录
                }else if(response.data.statusCode===600){//版本升级
                    uni.showModal({
                        title:'版本升级',
                        content:'您有新版本可以使用',
                        confirmText:'升级',
                        confirmColor:'#007AFF',
                        cancelText:'放弃',
                        cancelColor:'#999999',
                        success(res) {
                            if(res.confirm){
                                //点击升级按钮
                            }else if(res.cancel){
                                //点击放弃升级
                            }
                        }
                    })
                }else{//本次网络成功请求到服务器，但是服务器返回的不是定义好的状态码
                    if(fail && typeof(fail)=='function'){
                        fail(response.data.message)
                    } 
                }
            }else{//本次网络失败
                if(fail && typeof(fail)=='function'){
                    fail(response.errMsg)
                }
            }
        }else{//获取的response为空
            if(fail && typeof(fail)=='function'){
                fail(baseInfo.netWrong)
            }
        }
    }
}
 

二、将netRequest挂载到vue对象的属性上

在main.js文件中

import {netRequest} from './libs/netRequest.js'
Vue.prototype.$netRequest = netRequest

这样我们就不需要每个页面都引入一下

三、使用

                    let _this = this
                    uni.request({
                        header:_this.$netRequest.getHeaders(_this.$netRequest.contentType.urlencoded),
                        url:_this.$netRequest.requestLoginProcessAction,
                        data:{'username':'zhangjing','password':'123456'},
                        method:_this.$netRequest.method.POST,
                        success(res) {
                            //请求成功，对获取的response数据进行处理
                            _this.$netRequest.isSucc(res,function(data){
                                //本次网络请求成功，获取处理好之后可以使用的数据
                            },function(errStr){
                                //本次网络请求成功，但是数据有问题，例如密码错误
                                uni.showToast({
                                    title: errStr,
                                    icon:'none',
                                    duration:3000
                                });
                            })
                        },
                        fail(res) {
                            //本次网络请求失败了，没有请求到服务器
                        },
                        complete() {
                            //本次网络请求完成了，无论成功还是失败都会调用
                        }
                    })

⚠️这里需要注意_this，在网络请求的success、fail、complete使用this获取的不是本页的上下文

GitHub：https://github.com/jizhigang/netRequest