reactQuery onChange 请求取消

Question

我在useQuery挂钩上设置请求取消时遇到问题。 我检查了文档并像此文档一样尝试了它但是我没有像cancel()这样的方法可以在res promise 上使用。 我将我的代码更改为 axios 因为我在获取时遇到了一些解析器错误，我做了这样的事情：这是我的代码：

useQuery(['city', value], async () => {
    let cancel:Canceler;
    const promise = 
    axios.get(`http://localhost:8000/citiesname=${value}&_limit=1`, {
        cancelToken: new axios.CancelToken(exec => cancel = exec),
    }) as Promise<AxiosPromise<any>> & Cancelable;
    promise.cancel= () => {
        cancel();
    }
    const res = await promise;
    setData(res.data);
},{
    enabled: value !== undefined
})

你能帮我解决这个问题吗？ 这非常重要，因为我不想在每次用户输入内容时都发送请求，我只希望在他输入最后一个字符时发生

所以现在我没有返回数据，我通过setData设置器将它设置为我自己的 state 但它不起作用，仍然在每次更改时发送请求

Answer 1

与文档示例的不同之处在于您使用的是async / await ，而文档不是。 您没有返回 Promise，您在其中添加了取消 function，而是返回一个新的 Promise，由async关键字创建。

您需要坚持链接.then在这种情况下：

const { data } = useQuery(['city', value], () => {
    const controller = new AbortController();
    const signal = controller.signal;
    
    const promise = fetch(`http://localhost:8000/cities?name=${value}`,{
        signal
    });

    promise.cancel = () => controller.abort()
    
    return promise.then(res => res.json())
},{
    enabled: value !== undefined
})

Answer 2

@TkDodo 的回答解决了 Javascript 问题，但还有一个额外的 Typescript 问题。 react-query package 期望您设置属性cancel ，这不是Promise的本机属性。 因此，在某些时候，我们必须断言您的promise变量是具有cancel()方法的类型。

在 react-query package 中，他们将as any添加到.cancel中，但我们可以做得更好！ package 为Cancelable object 定义了一个接口，但由于某种原因它没有被导出。

interface Cancelable {
  cancel(): void
}

您仍然可以使用async / await语法（至少从代码的角度来看，这是未经测试的，所以我不知道在运行时是否有任何问题），但是您需要在await之前将从fetch返回的Promise分配给一个变量它的决议。

const { data } = useQuery(["city", value], async () => {
    const controller = new AbortController();
    const signal = controller.signal;
    // save the promise itself, not the resolved value
    const promise = fetch(`http://localhost:8000/cities?name=${value}`, {
      signal
    }) as Promise<Response> & Cancelable;
    promise.cancel = () => controller.abort();
    // here we resolve the promise
    const res = await promise;
    const data: cityInterface[] = await res.json();
    return data;
  }, {
    enabled: value !== undefined
  }
);