2行代码，解决静态冲突，自动帮你取消重复的过期请求

This content originally appeared on DEV Community and was authored by yinjialu

安装

npm i --save abort-request

使用方式

避免竞态冲突，detail 总是最新值

原始写法

import { watch, ref, unref } from 'vue';

// 请求方法
const getDataAPI = ({ params }: { params: { id: string } }) => {
    // 发起请求
};

const id = ref();
const detail = ref();

// 调用请求方法，handleQuery 可能多次调用，detail 数据是最新的吗？

const handleQuery = () => {

    getDataAPI({ params: { id: unref(id) } }).then((res) => {
        detail.value = res;
    });
};

watch(id, () => {
    handleQuery();
});

2行代码优化

import { watch, ref, unref } from 'vue';
import { createAutoAbortExpiredRequest, isAbortError } from 'abort-request';

// 请求方法
const getDataAPI = ({ params }: { params: { id: string } }) => {
    // 发起请求
};

const id = ref();
const detail = ref();

// 创建这个请求方法的自动取消版本
const getDataAPIAutoAbort = createAutoAbortExpiredRequest(getDataAPI);
const handleQuery = () => {
    // 使用 getDataAPIAutoAbort 替代 getDataAPI 进行调用，传参方式不变
    getDataAPIAutoAbort({ params: { id: unref(id) } }).then((res) => {
        detail.value = res;
    });
};

watch(id, () => {
    handleQuery();
});

避免阻塞浏览器 - 如果旧请求还未完成，就取消

XHR 和 Fetch 都支持传入 signal 用于中止请求，可以按照当前项目的封装方式，确定传入 signal 的方法，axios 配置参考：signal: new AbortController().signal

const getDataAPI = ({
    params,
    signal,
}: {
    params: { id: string };
    signal?: AbortSignal;
}) => {
    // 发起请求
};

const handleQuery = () => {
    // getDataAPIAutoAbort 可以接受一个函数作为参数，这个函数接受 signal 参数，组装好 signal 后，返回一个数组，用做请求参数
    getDataAPIAutoAbort(({ signal }) => [
        { params: { id: unref(id) }, signal },
    ]).then((res) => {
        // 当多次调用时，未完成的请求被自动取消，不会进入 then 逻辑
        detail.value = res;
    });
};

处理 loading 状态

const handleQuery = () => {
    loading.value = true;
    getDataAPIAutoAbort(({ signal }) => [{ params: { id: unref(id) }, signal }])
        .then((res) => {
            // 当多次调用时，未完成的请求被自动取消，不会进入 then 逻辑
            detail.value = res;
            loading.value = false;
        })
        .catch((err) => {
            // 判断不是取消请求的错误
            if (!isAbortError(err)) {
                loading.value = false;
            }
        });

    // 不能在 finally 中处理 loading 状态
};

This content originally appeared on DEV Community and was authored by yinjialu

Print Share Comment Cite Upload Translate Updates

APA

yinjialu | Sciencx (2024-07-06T07:52:04+00:00) 2行代码，解决静态冲突，自动帮你取消重复的过期请求. Retrieved from https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/

MLA

" » 2行代码，解决静态冲突，自动帮你取消重复的过期请求." yinjialu | Sciencx - Saturday July 6, 2024, https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/

HARVARD

yinjialu | Sciencx Saturday July 6, 2024 » 2行代码，解决静态冲突，自动帮你取消重复的过期请求., viewed ,<https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/>

VANCOUVER

yinjialu | Sciencx - » 2行代码，解决静态冲突，自动帮你取消重复的过期请求. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/

CHICAGO

" » 2行代码，解决静态冲突，自动帮你取消重复的过期请求." yinjialu | Sciencx - Accessed . https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/

IEEE

" » 2行代码，解决静态冲突，自动帮你取消重复的过期请求." yinjialu | Sciencx [Online]. Available: https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/. [Accessed: ]

rf:citation

» 2行代码，解决静态冲突，自动帮你取消重复的过期请求 | yinjialu | Sciencx | https://www.scien.cx/2024/07/06/2%e8%a1%8c%e4%bb%a3%e7%a0%81%ef%bc%8c%e8%a7%a3%e5%86%b3%e9%9d%99%e6%80%81%e5%86%b2%e7%aa%81%ef%bc%8c%e8%87%aa%e5%8a%a8%e5%b8%ae%e4%bd%a0%e5%8f%96%e6%b6%88%e9%87%8d%e5%a4%8d%e7%9a%84%e8%bf%87%e6%9c%9f/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

安装

使用方式

Related Posts