uniapp 请求取消

请求取消

uniapp 中request可撤销

// 发送请求,并保存 requestTask 对象

let requestTask = uni.request({

  url: 'https://example.com/api/data',

  success: (res) => {

    console.log('请求成功:', res);

  },

  fail: (err) => {

    console.log('请求失败:', err);

  }

});

// 在需要取消请求的地方调用 abort()

requestTask.abort();

取消后会调用fail回调函数

公共方法返回 requestTask 对象

// utils/request.js

export function publicRequest(options) {

  // 发送请求并返回 requestTask 对象

  const requestTask = uni.request({

    url: options.url,

    method: options.method || 'GET',

    data: options.data,

    success: options.success,

    fail: options.fail

  });

  // 返回 requestTask,供外部取消

  return requestTask;

}

调用

import { publicRequest } from '@/utils/request.js';

export default {

  data() {

    return {

      requestTask: null

    };

  },

  methods: {

    // 发送请求

    sendRequest() {

      this.requestTask = publicRequest({

        url: 'https://example.com/api/data',

        success: (res) => { console.log('成功:', res); },

        fail: (err) => { console.log('失败:', err); }

      });

    },

    // 取消请求

    cancelRequest() {

      if (this.requestTask) {

        this.requestTask.abort();

        this.requestTask = null;

      }

    }

  }

};

全局维护请求任务列表

// utils/request.js

const requestTasks = new Map(); // 全局请求任务池

export function publicRequest(options) {

  // 生成唯一标识(示例:URL + 参数序列化)

  const requestKey = `${options.url}_${JSON.stringify(options.data)}`;

  // 如果已有相同请求,先取消旧请求

  if (requestTasks.has(requestKey)) {

    requestTasks.get(requestKey).abort();

    requestTasks.delete(requestKey);

  }

  // 发送新请求

  const requestTask = uni.request({

    url: options.url,

    method: options.method || 'GET',

    data: options.data,

    success: (res) => {

      options.success?.(res);

      requestTasks.delete(requestKey); // 请求完成后移除任务

    },

    fail: (err) => {

      options.fail?.(err);

      requestTasks.delete(requestKey); // 失败后也移除任务

    }

  });

  // 记录当前请求任务

  requestTasks.set(requestKey, requestTask);

  return requestTask;

}

export function cancelRequest(requestKey) {

  if (requestKey) {

    if (requestTasks.has(requestKey)) {

      requestTasks.get(requestKey).abort();

      requestTasks.delete(requestKey);

    }

  } else {

    // 取消所有请求

    requestTasks.forEach(task => task.abort());

    requestTasks.clear();

  }

}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 网络请求官方文档 API需要先设置域名,个人服务器可以在右上角详情处-本地设置中勾选不校验,即可通过IP地址...
    EEEEsun阅读 1,400评论 0 0
  • uni.request本身已经是基于promise了,也可以用async/await,为啥还要进行封装呢? 1、封...
    Avin888阅读 493评论 0 0
  • 1,新建api.js const BASE_URL = 'https://222222222 /hengyuani...
    undefined汪少阅读 8,911评论 0 0
  • import Config from "config.js";//参数 可传// options {// ...
    麦芽的香气_c582阅读 3,987评论 0 0
  • /** 取消一个先前通过调用 requestAnimationFrame 方法添加到计划中的动画帧请求*/ dec...
    凡凡的小web阅读 3,873评论 0 0

友情链接更多精彩内容