uniapp 封装完整的http请求

UniApp 请求模块

功能描述

• 直接复制粘贴到uniapp项目里使用
• 包括手动取消单个请求
• 包括自动检测取消重复请求
• 请求拦截, 响应拦截

登录模块代码

// login.js
// import request from './request'

export default {
    login () {
        try {
            return  request.get("posts", { param1: "value1" });
        } catch (error) {
            console.error("请求错误：", error);
        }
    }
}

使用示例

// 使用的地方
// import  http from '@/http/login'

let abc = async function() {
    let bbb = await http.login()
    console.log(bbb)
}

request.js

// 基础URL，所有请求的前缀
const BASE_URL = "https://jsonplaceholder.typicode.com/";

// 请求超时时间，单位毫秒
const REQUEST_TIMEOUT = 60000;

// 用于存储待处理的请求（处理重复请求和取消请求）
let pendingRequests = {};

/**
 * 获取token的方法
 * 例如，从本地存储或vuex中获取
 */
function getToken() {
    return uni.getStorageSync("token") || null;
}

/**
 * 移除待处理的请求
 * 主要用于处理重复的请求和取消请求
 * @param {Object} config - 请求配置
 */
// 如发起了一个GET请求
// request.get("/api/data");
// 随后决定取消这个请求
// removePendingRequest({ method: "GET", url: "/api/data" });
    
function removePendingRequest(config) {
    const requestIdentifier = `${config.method}${config.url}`;
    if (pendingRequests[requestIdentifier]) {
        const { task } = pendingRequests[requestIdentifier];
        task.abort();
        delete pendingRequests[requestIdentifier];
    }
}

// 请求与响应拦截
/**
 * 全局请求拦截器
 * 可以用于修改请求配置，如添加请求头等
 * @param {Object} config - 请求配置
 * @return {Object} - 返回修改后的请求配置
 */
function requestInterceptor(config) {
    config.header.Authorization = "Bearer " + getToken();
    return config;
}

/**
 * 全局响应拦截器
 * 可以用于处理特定的响应，如根据状态码进行重定向等
 * @param {Object} response - 响应对象
 * @return {Object} - 返回处理后的响应对象
 */
function responseInterceptor(response) {
    if (response.statusCode === 401) {
        // 未授权处理
    }
    return response;
}

// 封装的请求方法
export default {
    /**
     * 封装的网络请求方法
     * @param {Object} options - 请求选项
     * @return {Promise} - 返回一个Promise对象
     */
    request(options) {
        return new Promise((resolve, reject) => {
            const finalOptions = {
                ...options,
                url: BASE_URL + options.url,
                timeout: REQUEST_TIMEOUT,
                header: {
                    "Content-Type": "application/json",
                    ...options.header
                }
            };

            // 使用请求拦截器
            const interceptedOptions = requestInterceptor(finalOptions);

            // 取消重复的请求
            removePendingRequest(interceptedOptions);
            const requestTask = uni.request({
                ...interceptedOptions,
                success: (response) => {
                    // 使用响应拦截器
                    const interceptedResponse = responseInterceptor(response);
                    if (interceptedResponse.statusCode >= 200 && interceptedResponse.statusCode < 300) {
                        resolve(interceptedResponse.data);
                    } else {
                        reject(interceptedResponse);
                    }
                },
                fail: (error) => {
                    if (error.errMsg !== 'request:fail abort') {
                        reject(error);
                    }

                },
                complete: () => {
                    removePendingRequest(interceptedOptions);
                }
            });

            // 存储此次请求任务，以供后续处理
            const requestIdentifier = `${interceptedOptions.method}${interceptedOptions.url}`;
            pendingRequests[requestIdentifier] = {
                cancel: reject,
                task: requestTask
            };
        });
    },

    /**
     * 封装的GET请求方法
     * @param {string} url - 请求的URL
     * @param {Object} params - 请求参数
     * @param {Object} options - 其他选项
     * @return {Promise} - 返回一个Promise对象
     */
    get(url, params = {}, options = {}) {
        return this.request({
            method: "GET",
            url,
            data: params,
            ...options
        });
    },

    /**
     * 封装的POST请求方法
     * @param {string} url - 请求的URL
     * @param {Object} data - 请求数据
     * @param {Object} options - 其他选项
     * @return {Promise} - 返回一个Promise对象
     */
    post(url, data, options = {}) {
        return this.request({
            method: "POST",
            url,
            data,
            ...options
        });
    }
};

// 调用方法
/*
login() {
    try {
        return request.get("posts", { param1: "value1" });
    } catch (error) {
        console.error("请求错误：", error);
    }
}
*/