uni-app/vue请求封装

前言：

最近公司准备开发一个安卓的app，苦于原生开发的成本和无人会安卓技术，决定采用混合开发来实现。基于低学习成本，最终选择了能较快上手的uni-app技术。这期间也是一边看文档，一边开发，痛并快乐着。第一次尝试写博客，力求用最简单的文字记录一个项目的开发过程，希望自己能坚持下去！
其实在翻看uni-app的开发文档，不难发现，他的很多语法和vue非常像，比方说数组遍历、条件渲染等，只是将vue的【v】改成了【uni】。同时其又参考了微信小程序开发的文档，诸多语法也和小程序比较相似，比方说小程序的生命周期、路由跳转以及传值等。所以这篇文章是基于uni-app，但是放之vue和微信小程序都是可以参考一番的。

一、测试环境、正式环境

uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，对此我们可以根据这一条件来动态切换连接测试服务器或生产服务器

if(process.env.NODE\_ENV === 'development'){
    console.log('开发环境') 
}else if (process.env.NODE\_ENV === 'production'){
    console.log('生产环境')
}

二、请求封装

1、在项目中新建一个baseconfig.js文件，用于存放项目的接口地址，根据不同的环境分别添加测试接口域名和正式接口域名，然后将变量用export default命令模块指定输出：

var baseconfig = {};
 //测试地址
if (process.env.NODE_ENV === 'development') { 
    baseconfig = {
        server: 'http://test1/api/',
        pdcom: "http://test2/api/", 
    }
    
 //正式地址
} else if (process.env.NODE_ENV === 'production') {  /
    baseconfig = {
        server: 'http://formal/api/',
        pdcom: "http://formal/api/",
    }
}
export default baseconfig;

2、新建index.js将公共域名引用到文件之中

import baseconfig from "../baseconfig.js"

3、ajax封装

 //写在index.js文件
const httpClient = {
request: function(method, url, data, contenType) {
    let p = {
        XToken: '',
        XUser: '',
        ContentType: 'application/json' //默认值
    };
    
    //获取接口token本地存储的token值---此字段视项目情况而定
    var XToken = uni.getStorageSync('Token');
    if (XToken) {
        p.XToken = XToken;
    }
    
    //获取接口User本地存储的User值---此字段视项目情况而定
    var XUser = uni.getStorageSync('User');    
    if (XUser) {
        p.XUser = XUser;
    }
    if (contenType) {
        p.ContentType = contenType;
    }
    
    //头部信息封装
    var herders = { 
        'X-Token': p.XToken,
        'X-User': p.XUser,
        'Content-Type': p.ContentType
    };
    
    return new Promise((resolve, reject) => {
        //添加一个提示框，可以提升交互，也能防止数据未加载完用户点击导致报错
        uni.showLoading({
            title:'加载中',
            mask:true
        });
        uni.request({
            url: url, //接口地址
            header: herders,
            data: data, // 传入的参数
            method: method, // 请求方法
            success: function(res) {
                //关闭提示框
                uni.hideLoading();
                
                if(res.statusCode!==200){   //请求失败显示报错信息
                    uni.showToast({
                        title: res.statusCode.toString(),
                        duration: 1000,
                        icon: "none"
                    })
                    return;
                }
                //请求token失效或者是错误，直接返回到登录页，让用户重新登陆
                if (!res.data.meta.success && res.data.meta.message == "Token校验失败异常:未登录,或者token错误!null" ||res.data.meta.message =='Token校验失败异常:token '+'['+XToken+']' +' '+'is invalid' ) {
                    uni.showToast({
                        title:'登录过期请重新登录',
                        duration: 1000,
                        icon: "none"
                    })
                    setTimeout(function() {
                        uni.reLaunch({
                            url: "../../../pages/login/login/login"
                        })
                    }, 1500)
                }
                resolve(res.data) // 成功返回的结果
            },
            fail: function(err) {
                uni.hideLoading()
                reject(err) // 失败结果
            }
        })
    });
},

// 常用请求方法封装
Get: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('GET', allurl, data);
},
Post: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('POST', allurl, data);
},
Put: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('PUT', allurl, data);
},
Patch: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('PATCH', allurl, data);
},
Delete: function(url, data, type) {
    let allurl = this.getUrl(type, url);
    return this.request('DELETE', allurl, data);
},

// 页面请求的时候会传一个type，根据type值来调用不同域名的地址，下文有示例
getUrl: function(type, url) {
    let allurl = ""
    if (type == 1) {
        allurl = baseconfig.server
    } else if (type == 2) {
        allurl = baseconfig.pdcom
    } 
    return allurl + url
}
};
// 导出方法
module.exports = httpClient

4、新建一个comment.js文件，用于存放对外暴露文件,此方法还可以优化，后期在处理

import httpClient from './index.js'     //comment.js文件
    export function get(url, params, type) {
        return httpClient.Get(url, params, type);
    }
    export function post(url, params, type) {
        return httpClient.Post(url, params, type);
    }
    export function put(url, params, type) {
        return httpClient.Put(url, params, type);
    }
    export function patch(url, params, type) {
        return httpClient.Patch(url, params, type);
    }
    export function del(url, params, type) {
        return httpClient.Delete(url, params, type);
    }

5、在unp-app 自带main.js文件中将方法挂载到全局，变成公共方法。

import { get,post,put,patch,del } from '@/api/common.js' 
Vue.prototype.get = get
Vue.prototype.post = post
Vue.prototype.put = put
Vue.prototype.patch = patch
Vue.prototype.del = del

6、某一个页面进行调用

methods: {   //在uni-app的methods中添加请求接口的方法
  getData() {
    var that = this;
    this.get("search/goods/editList", {   //需要请求的接口
      pageNum: 1,              // 参数
      pageSize: 10,                       // 参数
   }, 3).then(res => {                    //3代表type，反馈到请求封装之中，根据不同的type调用不同的域名
       if (res.meta.success) {
           //请求成功操作
           } else {
            //请求失败操作
        }
       })
  },
},