如何在每次获取 api 请求和响应之前和之后调用特定函数

Question

我想在发送请求期间以及在使用 Vanilla JS 的每个 fetch() 函数收到响应后调用一个函数。我看到 jquery ajax 正在提供某种 $.ajax 设置来执行此操作，但我想使用 Vanilla JS 来执行此操作。提前致谢。

Answer 1

fetch 没有这样的功能。不过，您可以编写一个包装函数：

const myFetch = async (...args) => {
    do_before();
    const result = await fetch(...args);
    do_after();
    return result;
}

然后调用该函数而不是直接访问 fetch。

Answer 2

您可以通过重写获取函数来实现

// First rename original fetch function
window.originalFetch = window.fetch

// Then override fetch function with your new function
window.fetch = async (... args) => {
    console.log("before");
    // call the renamed fetch function
    const result = await window.originalFetch(...args);
    console.log("after");
    return result;
}


// Then you can use it
fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

解释：

首先，你改变原来的函数名，然后你编写自己的同名函数“fetch”

感谢@Quentin从他的回答中复制的一些代码

如何在每次获取 api 请求和响应之前和之后调用特定函数

How to call a specific function before and after every fetch api request and response

javascript

fetch-api