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++
}
})