输入reactjs时取消axios get请求

Question

我正在创建一个自动完成功能,所以基本上每当我在搜索框上输入时,它都会取消之前的http get请求.我检查了jQuery ui autocomplete,这就是他们所做的.在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请求.

Answer 1

自axios v0.15起,您可以取消请求:

您还可以通过将执行程序函数传递给CancelToken构造函数来创建取消令牌:

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();

欲了解更多信息,请查看取消.并根据您的代码:

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;

而且在这里