uniappvue请求封装

前言：

最近公司准备开发一个安卓的 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 {// 请求失败操作}
       })
  },
},