uni-app小程序request请求封装

本文主要是介绍uni-app小程序request请求封装，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

const config = require('./api.js'); // 请求的base URL

const getTokenHandle = () => {  
    return uni.getStorageSync('token')  // 获取登录用户token
}

// 请求白名单页面（不需要token请求的页面）
const pageWhiteList = ['pages/login/login', 'pages/login/phoneLogin'];

// 请求响应拦截处理
const resInterceptHandle = () => {
    const routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    const curRoute = routes[routes.length - 1].route // 获取当前页面路由
    const flag = pageWhiteList.includes(curRoute)
    if (!flag) {
        console.log(`---[ ${curRoute} ]页面获取数据需要登录---`)
        uni.navigateTo({
            url: '/pages/login/login'
        })
    }
    return flag
}


// 请求参数处理
const requestParam = (data, method) => {
    let str = '';
    if (method == 'post') {
        str = JSON.stringify(data);
        return str;
    } else if (method == 'get') {
        for (let i in data) {
            str += i + '=' + data[i] + '&';
        }
        str = str.length > 0 ? str.substring(0, str.length - 1) : '';
        return encodeURI(str);
    }
};


// 请求封装
const sendRequest = (method = 'GET', url = '', params = {}, ) => {
    let promise = new Promise(async (resolve, reject) => {
        let token = await getTokenHandle()
        const URL = config.baseUcodeURL + url + (method === 'GET' ? params : '')
        //网络请求
        wx.request({
            header: {
                Authorization: token
            },
            url: URL,
            method,
            data: method === 'GET' ? {} : params,
            success: function(res) {
                // 响应403拦截跳转登录
                if (res.statusCode == 200 && res.data.status === 403) {
                    resInterceptHandle()
                    return
                }
                // 服务器返回数据
                if (res.statusCode == 200) {
                    resolve(res.data);
                } else {
                    console.log(`============${method} 请求失败：============`);
                    console.error(
                        '接口地址: ',
                        '【 ' + URL + ' 】'
                    );
                    console.error('请求参数: ', params);
                    console.error('返回结果: ', res);
                    wx.showToast({
                        title: res.data.emsg,
                        icon: 'none',
                        duration: 3000,
                        mask: true
                    });
                    reject(res);
                }
            },
            fail: function(res) {
                console.log(`============${method} 请求失败：============`);
                console.error(
                    '接口地址: ',
                    '【 ' + URL + ' 】'
                );
                console.error('请求参数: ', params);
                console.error('返回结果: ', res);
                reject(res);
            }
        });
    });
    return promise;
}


// 封装post请求（url:请求接口； data：请求参数；）
const httpPost = async (url, data) => {
    const params = requestParam(data, 'post');
    const res = await sendRequest('POST', url, params)
    console.log('post请求成功响应：', res)
    return res
};

// 封装get请求（url:请求接口； data：请求参数；）
const httpGet = async (url, data) => {
    let params = data && JSON.stringify(data) != '{}' ?
        '?' + requestParam(data, 'get') :
        '';
    const res = await sendRequest('GET', url, params)
    console.log('get请求成功响应', res)
    return res
};

// 自定义请求类型
const http = async (params = {
    method: 'GET',
    url: '',
    data: {}
}) => {
    const res = await sendRequest(params.method, params.url, params.data)
    console.log(`自定义${params.method}请求成功响应`, res)
    return res
};

module.exports = {
    Post: httpPost,
    Get: httpGet,
    http: http
};

二、在 main.js 中 把封装的方法挂载到全局对象上

const {Get,http,Post} = require("./request/index");

Vue.prototype.$http = http
Vue.prototype.$get = Get
Vue.prototype.$post = Post

三、使用

this.$post('/login/login', data).then(res => {}).catch(err=>{})

这篇关于uni-app小程序request请求封装的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！