uni-app小程序request請求封裝

一、在request目錄下新建index.js

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=>{})