uni-app/vue请求封装

前言：

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

1、测试环境、正式环境

uni-app 可经过 process.env.NODE_ENV 判断当前环境是开发环境仍是生产环境，对此咱们能够根据这一条件来动态切换链接测试服务器或生产服务器

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

2、请求封装

一、在项目中新建一个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;

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

import baseconfig from "../baseconfig.js"

三、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

四、新建一个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);
    }

五、在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

六、某一个页面进行调用

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 {
            //请求失败操做
        }
       })
  },
},