我正在创建一个自动完成功能，所以基本上每当我在搜索框中键入内容时，它都会取消之前的 http get 请求。我检查了 jQuery ui 自动完成，这就是他们所做的。在 axios 中是否可能，如果可以，我该如何实现它。到目前为止，这是我的 http get 请求代码:

export function autocompleteSearchTest(value){ 
    return axios.get(`https://jqueryui.com/resources/demos/autocomplete/search.php`,{ 
        params: { 
            q: value 
        } 
    }) 
    .then(response => { 
        return response.data.response; 
    }) 
    .catch(error => { 
        const result = error.response; 
        return Promise.reject(result); 
    }); 
} 

这是我在搜索框中键入内容时的屏幕截图:

如您所见，它不会取消之前的 http get 请求。

请您参考如下方法:

从 axios v0.15 开始，您可以取消请求:

You can also create a cancel token by passing an executor function to the CancelToken constructor:

var CancelToken = axios.CancelToken; 
var cancel; 
 
axios.get('/user/12345', { 
  cancelToken: new CancelToken(function executor(c) { 
    // An executor function receives a cancel function as a parameter 
    cancel = c; 
  }) 
}); 
 
// cancel the request 
cancel(); 

更多信息请查看Cancellation 。并根据您的代码:

import React from 'react' 
import axios from 'axios'; 
 
export function autocompleteSearchTest(value) { 
    if (cancel != undefined) { 
        cancel(); 
    } 
    return axios.get(`https://jqueryui.com/resources/demos/autocomplete/search.php`, { 
        cancelToken: new CancelToken(function executor(c) { 
            // An executor function receives a cancel function as a parameter 
            cancel = c; 
        }), 
        params: { 
            q: value 
        } 
    }) 
        .then(response => { 
            return response.data.response; 
        }) 
        .catch(error => { 
            const result = error.response; 
            return Promise.reject(result); 
        }); 
} 
 
var CancelToken = axios.CancelToken; 
var cancel; 
 
export class AutoComplete extends React.Component { 
 
    constructor() { 
        super() 
        this.state = { 
            search: '' 
        }; 
        this.handleSearchChange = this.handleSearchChange.bind(this); 
    } 
 
    handleSearchChange(event) { 
        const target = event.target; 
        const value = target.value; 
        this.setState({ 
            search: value 
        }); 
        autocompleteSearchTest(value) 
    } 
 
    render() { 
        return ( 
            <div className="App-intro Dialog-section"> 
                <h2>AutoComplete</h2> 
                <div className="form-control"> 
                    <label htmlFor="password">Lookup :</label> 
                    <input name="search" type="text" value={this.state.search} 
                           onChange={this.handleSearchChange} 
                           id="password" ref="password" placeholder="Enter line"/> 
                </div> 
            </div> 
        ) 
    } 
} 
 
export default AutoComplete; 

这是