uni.request封装

1.封装uni.request

创建uniRequest.js，用于封装请求，使用promise封装

/**
 * 请求接口
 * @param method  请求类型：默认get请求
 * @param serverUrl  服务
 * @param demainUrl  接口
 * @param params  参数
 * @param dataType  是否为json格式
 */
const request = (method = 'GET', serverUrl, demainUrl, params, dataType) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: domianUrl(serverUrl, demainUrl),
            data: params,
            method: method,
            header: setheader(dataType),
            success: (res) => {
                if (res.statusCode == 200) {
                    let data = res.data;
                    resolve(data);
                } else {
                    reject(res);
                }
            },
            fail: (err) => {
                if (err.errMsg == 'request:fail timeout') {
                    uniToast('请求超时，请重试！');
                } else if (err.errMsg == 'request:fail') {
                    uniToast('无网络！');
                } else {
                    uniToast('服务器繁忙');
                }
                reject(err);
            }
        })
    })
}
/**
 * 上传文件
 * @param serverUrl  服务
 * @param demainUrl  接口
 * @param params  参数
 */
const uploadFile = (serverUrl, demainUrl, params) => {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: domianUrl(serverUrl, demainUrl),
            filePath: params,
            name: "file",
            success: (res) => {
                if (res.statusCode == 200) {
                    let data = res.data;
                    resolve(data);
                } else {
                    reject(res);
                }
            },
            fail: (err) => {
                if (err.errMsg == 'request:fail timeout') {
                    uniToast('请求超时，请重试！');
                } else if (err.errMsg == 'request:fail') {
                    uniToast('无网络！');
                } else {
                    uniToast('服务器繁忙');
                }
                reject(err);
            }
        })
    })
}
/**
 * 处理请求头
 * @param dataType  是否json格式
 * @param domain  接口
 */
const setheader = (dataType, flag) => {
    let header = {};
    if (dataType == 'json') {
        header['Content-Type'] = 'application/json;charset=UTF-8';
    } else {
        header['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    }
    return header;
}
/**
 * 处理接口
 * @param serveUrl  请求服务
 * @param domain  接口
 */
const domianUrl = (serveUrl, domainUrl) => {
    let url = serveUrl + domainUrl;
    return url;
}
/**
 * 处理吐司
 * @param msg  吐司内容
 * @param duration  吐司时间
 */
const uniToast = (msg, duration = 2000) => {
    uni.showToast({
        title: msg,
        duration: duration,
        icon: 'none'
    })
}
/**
 * get请求
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const get = (serverUrl, url, params = {}) => {
    return request('GET', serverUrl, url, params)
}
/**
 * post请求
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const post = (serverUrl, url, params = {}) => {
    return request('POST', serverUrl, url, params)
}
/**
 * post请求 json格式
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const postJson = (serverUrl, url, params = {}) => {
    params = JSON.stringify(params);
    return request('POST', serverUrl, url, params, 'json')
}
/**
 * put请求
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const put = (serverUrl, url, params = {}) => {
    return request('PUT', serverUrl, url, params)
}
/**
 * del请求
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const del = (serverUrl, url, params = {}) => {
    return request('DEL', serverUrl, url, params)
}
/**
 * upload 文件上传
 * @param serverUrl  服务，H5-服务代理，小程序-服务地址
 * @param url  接口："/api/login/login"
 * @param params  参数
 * @return fun 回调函数
 */
const upload = (serverUrl, url, params = {}) => {
    return uploadFile(serverUrl, url, params)
}
export {
    get,
    post,
    postJson,
    put,
    del,
    upload,
}

创建domain.js，用于接口管理

import {get,post,postJson} from "@/utils/uniRequest";
import urlConfig from "@/utils/urlConfig";

const getRedomToken = (params) => {  //获取登录密码加密秘钥
    return get(urlConfig.reconsitution,'/common/getRedomToken', params);
}
const getRandomNumber = (params) => {  //获取二维码随机数接口
    return post(urlConfig.reconsitution,'/common/getRandomNumber', params);
}
const queryCollectionRecord = (params) => {  //获取列表数据接口
    return postJson(urlConfig.reconsitution,'/common/queryCollectionRecord', params);
}

export {
    getRedomToken,
    getRandomNumber,
    queryCollectionRecord
}

创建urlConfig.js，用于处理多端接口服务配置。

/*后台接口服务配置*/
var service = {
    sType: 'testB', //环境类型：exploit-开发环境，testB-测试环境，uat-uat环境，prod-生产环境
    channelType: '1', //接口请求渠道
}

const serverInfo = getServeContext(service.sType);

/**
 * 判断环境服务
 * @param v  环境类型
 * @returns Object
 */
function getServeContext(v) {
    var service = {
        reconsitution: '', //接入服务
    }
    // #ifdef H5
    service.reconsitution = '/reconsitution'; //测试服务
    // #endif

    // #ifdef MP-WEIXIN
    switch (v) {
        case 'exploit':
            // 开发环境
            service.reconsitution = 'https://***:10443/mobile/reconsitution';
            break;
        case 'testB':
            // 测试环境
            service.reconsitution = 'https://***:10443/mobile/reconsitution';
            break;
        case 'uat': // uat环境
            service.reconsitution = 'https://***:11443/mobile/reconsitution';
            break;
        case 'prod':
            // 生产环境
            service.reconsitution = 'https://***:9446/refactor';
            break;
    }
    // #endif
    return service;
}

export default {
    service: service,
    sType: service.sType,
    channelType: service.channelType,
    reconsitution: serverInfo.reconsitution,
}

当为打开为H5时，存在跨域的问题，所以需要转发代理（解决uniapp的H5跨域）；而小程序没有跨域问题，直接使用域名服务。

在页面中调用接口

import {getRedomToken} from "@/api/domain";

export default {
　　onLoad() {
　　　　this.getRedomToken()
　　},
　　methods: {
　　　　async getRedomToken() {
　　　　　　var temp = {
　　　　　　　　entCustId: '0600400000520170519'
　　　　　　}
　　　　　　const res = await getRedomToken(temp)
　　　　　　console.log(res)
　　　　},
　　}
}