uniapp,每次请求时,中断上次请求

发布于:2025-06-30 ⋅ 阅读:(27) ⋅ 点赞:(0)

1.封装uni.request

import {
		BASE_URL
	} from "@/config/config.js"
	import store from "@/store/index.js";
class RequestManager {
  constructor() {
    this.requestTasks = new Map() // 存储所有请求任务
    this.baseURL = BASE_URL
	this.header = {
		'Content-Type': 'application/json',
		'Authorization': uni.getStorageSync("AccessToken") ? 'Bearer ' + uni
			.getStorageSync(
				"AccessToken") : ''
	}
  }

  /**
   * 发送请求
   * @param {Object} options 请求配置
   * @param {string} requestId 请求ID,用于标识和取消特定请求
   * @returns {Promise}
   */
  request(options, requestId = 'default') {
    // 中断同ID的之前的请求
    if (this.requestTasks.has(requestId)) {
      this.requestTasks.get(requestId).abort()
      this.requestTasks.delete(requestId)
    }

    return new Promise((resolve, reject) => {
      const config = {
        url: this.baseURL + options.url,
        method: options.method || 'GET',
        data: options.data || {},
        header: options.header ? Object.assign({}, this.header, options.header) : options.header,
        success: (response) => {
        	let res = response.data
        	if (res.code === 422) {
        		store.commit('SET_USERINFO', {})
        		store.commit('SET_ACCESSTOKEN', '')
        		store.commit('SET_MESSAGETOTAL', 0)
        		uni.removeStorageSync("userInfo")
        		uni.removeStorageSync('AccessToken', '')
        		//回到登录页
        		uni.showToast({
        			title: "请登录!",
        			icon: 'none',
        			success() {
        				setTimeout(() => {
        					uni.reLaunch({
        						url: '/pages/user/index?type=login'
        					})
        				}, 1500)
        			}
        		})
        		return false;
        	}else if(res.code != 200){
        		uni.showToast({
        			title: res.msg || '',
        			duration: 1500,
        			icon: 'none',
        		})
        	}else{
        		resolve(res)
        	}
        },
        fail: (err) => {
          reject(err)
        },
        complete: () => {
          // this.requestTasks.delete(requestId)
        }
      }

      const task = uni.request(config)
      this.requestTasks.set(requestId, task)
    })
  }

  /**
   * 中断特定请求
   * @param {string} requestId 请求ID
   */
  abort(requestId = 'default') {
    if (this.requestTasks.has(requestId)) {
      this.requestTasks.get(requestId).abort()
      this.requestTasks.delete(requestId)
    }
  }

  /**
   * 中断所有请求
   */
  abortAll() {
    this.requestTasks.forEach(task => {
      task.abort()
    })
    this.requestTasks.clear()
  }

  // 快捷方法...
  get(url, data = {}, header = {}, requestId = 'default') {
    return this.request({
      url,
      method: 'GET',
      data,
      header
    }, requestId)
  }

  post(url, data = {}, header = {}, requestId = 'default') {
    return this.request({
      url,
      method: 'POST',
      data,
      header
    }, requestId)
  }
}

// 创建单例
const http = new RequestManager()

export default http

2.封装api

goodsLess请替换成参数+自定义id,以防出现同一接口不同参数也出现中断的情况

import http from '@/request/request.js'

//购物车减少商品数量
export const goodsLess = ({ goods_id, goods_sku_id }) => {
	return http.get(`api/user/cart/sub?goods_id=${goods_id}&goods_sku_id=${goods_sku_id}`, {}, {}, 'goodsLess')
}

//购物车增加商品数量
export const goodsMore = ({ goods_id, goods_sku_id, goods_num }) => {
	return http.get(`api/user/cart/add?goods_id=${goods_id}&goods_sku_id=${goods_sku_id}&goods_num=${goods_num}`, {}, {}, 'goodsMore')
}

3.在页面中使用

//增加购物车数量
					goodsMore({ goods_id: id, goods_sku_id, goods_num: 1 }).then(res => {
						if(res.code == 200){
							item.total_num++
						}
					})


网站公告

今日签到

点亮在社区的每一天
去签到