web-dev-qa-db-ja.com

reactjsの入力時にaxios getリクエストをキャンセルする

オートコンプリート関数を作成しているので、基本的に検索ボックスに入力するたびに、以前のhttp getリクエストがキャンセルされます。私はjQueryのuiオートコンプリートを確認しました。はい、どうすれば実装できますか？これまでのところ、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);
    });
}

検索ボックスに入力したときのスクリーンショットは次のとおりです

enter image description here

ご覧のとおり、以前のhttp getリクエストはキャンセルされません。

reactjsaxios
9
Sydney Loteria

Axios v0.15以降、リクエストをキャンセルできます：

Executor関数を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;

そして、ここにあります enter image description here

22
Vladislav Kysliy

このような小さなヘルパーラッパーを作成して、前のリクエストをキャンセルする必要がある場所ならどこでも使用できます。

// ../services.js

function createApi(baseURL) {
  const axiosInst = axios.create({
    baseURL,
  });

  axiosInst.defaults.headers.common['Content-Type'] = 'application/json';
  
  return (type = 'get') => {
    let call = null;
    return (url, data, config) => {
      if (call) {
        call.cancel('Only one request allowed!');
      }
      call = axios.CancelToken.source();
      const extConf = {
        cancelToken: call.token,
        ...config,
      };
      switch (type) {
        case 'request':
          return api[type](extConf);

        case 'get':
        case 'delete':
        case 'head':
          return api[type](url, extConf);

        default:
          return api[type](url, data, extConf);
      }
    };
  };
}

export const baseApi = createApi('http://localhost:5000/api/')

そして、次のような場所で使用します。

import baseApi from '../servises.js';

const fetchItemsService = baseApi('post');

//...
componentDidMount() {
  fetchItemsService('/items').then(() => {});
}
//...
1
Alexander Yamkov

faxios を使用します

// building..
let req = faxios()
  .baseURL("http://jsonplaceholder.typicode.com")
  .url("posts", 1, "comments")

// fetching..
req // => 
  .FETCH // => Promise
  .then(res => {})
  .catch(err => {});

// canceling...
req.cancel();
1
challenger

このためにRxJSのようなものを使用したい場合、ユーザーが検索する場合、リクエストが行われる前に入力を遅らせることができます。

0
Kieran Grosvenor

使用：反応、axios、およびredux-axios-middleware

ユーザーアクション：

import axios from 'axios';
import * as type from 'constants/user';

const CancelToken = axios.CancelToken;
let cancel;

export const addUser = (data) => {
  if (cancel !== undefined) cancel();

  return ({
    types: [type.ADD_USER_REQUEST, type.ADD_USER_SUCCESS, type.ADD_USER_FAILURE],
    payload: {
      request: {
        url: '/api/user',
        cancelToken: new CancelToken(c => cancel = c),
        method: 'POST',
        data,
      },
    },
  });
};
0
Andrii Vielkov