React 实时搜索功能工作，但不会取消网络选项卡中的先前请求

Question

我正在学习有关"alligator.io"的教程。 链接是：https://alligator.io/react/live-search-with-axios/

法典：： 应用.js

import React, { Component } from 'react';
import { avoidUnnecessarySearch } from './utils';
import './App.css';
class App extends Component {
state = {
movies: null,
loading: false,
value: ''
};
search = async val => {
this.setState({ loading: true });
const res = await avoidUnnecessarySearch(
`https://api.themoviedb.org/3/search/movie?query=${val}&api_key=aac2c5b048fc2fae15675475f98c6ef7`
);
const movies = await res ? res.results:'';
console.log(movies);
// this.setState({ movies, loading: false });
};
onChangeHandler = async e => {
this.search(e.target.value);
this.setState({ value: e.target.value });
};

render() {
return (
<div>
<input
value={this.state.value}
onChange={e => this.onChangeHandler(e)}
placeholder="Type something to search"
/>
</div>
)
}
}
export default App;

实用工具.js

import axios from 'axios';
const makeRequestCreator = () => {
let token;
return async (query) => {
// Check if we made a request
if(token){
// Cancel the previous request before making a new request
token.cancel()
}
// Create a new CancelToken
token = axios.CancelToken.source()
try{
const res = await axios(query, {cancelToken: token.token})
const result = res.data
return result;
} catch(error) {
if(axios.isCancel(error)) {
// Handle if request was cancelled
console.log('Request canceled', error.message);
} else {
// Handle usual errors
console.log('Something went wrong: ', error.message)
}
}
}
}
export const avoidUnnecessarySearch = makeRequestCreator();

问题：： 麻烦的是，即使一切正常，但在发出新请求之前取消所有先前请求的 utils.js 文件中编写的代码无法正常工作，并且我收到每个按键或字母的网络请求我在搜索框中键入。

我的意图是，如果我输入"蜘蛛侠"，那么我应该只搜索蜘蛛侠，而不是"s"或"p"或"i"或"d"或"e"或"r"或">

m"或"a"，并且应该直接取消这些请求以避免网络负担。 任何见解都会在这里有所帮助。

Answer 1

我复制了完全相同的代码并在代码沙箱中运行。它正在工作.
Codesandbox： https://codesandbox.io/s/inspiring-mountain-zgqqt
正如你所看到的，当我输入spiderman所有其他请求都被取消了，只有成功命中单词spiderman。 接口请求。Lmk，如果你遇到任何问题。