当前位置：首页 > news >正文

封装axios，实现取消请求

news 来源：原创 2025/5/7 6:09:09

封装axios

import axios from 'axios'// 创建自定义的请求类
class CancelableRequest {constructor() {this.controller = new AbortController()}abort() {this.controller.abort()}
}// 创建 axios 实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // 在 .env 文件中配置timeout: 5000 // 请求超时时间
})// 请求拦截器
service.interceptors.request.use(config => {// 在发送请求之前做些什么// 例如：添加 token// if (store.getters.token) {//   config.headers['Authorization'] = `Bearer ${store.getters.token}`// }return config},error => {// 对请求错误做些什么console.log(error) // for debugreturn Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.data// 如果自定义 code 不是 200，则判断为错误if (res.code !== 200) {// 可以在这里处理错误提示return Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {console.log('err' + error) // for debug// 可以在这里处理错误提示return Promise.reject(error)}
)export const get = (url, params = {}, config = {}) => {const cancelable = new CancelableRequest()const promise = service.get(url, {params,signal: cancelable.controller.signal,...config})promise.__proto__.abort = () => cancelable.abort();return promise
}

封装api

import { get } from "@/utils/requestPlus.js"
//有缘-无缘-专项服务
export const serviceList = (params) => {return get(`/point/market/service/list`, params, {method: "get"});
}

在页面中使用

//专项服务getSpecializedServices(parentClassify, classify, name = "") {if(this.requestTarget) request.abort()this.requestTarget = serviceList({ parentClassify, classify, name }).then((res) => {let { rows = [] } = res;this.$set(this.serviceData, 2, rows);});},