responseJS как остановить его при прослушивании запроса ajax

Question

У меня есть вызов ajax в компоненте. И затем setState внутри обещания ajax.

Код как этот

componentDidMount(){ 
    axios.post('mydomian.com/item/',this.state) 
    .then(function (response) { 
     const res = response.data 
     if (res.status === 'OK') { 
      this.setState({items :res.list}) 
     }else{ 
      console.log('can not load data', response) 
     } 
    }.bind(this)) 
} 
componentWillUnmount(){ 
    how to stop everything about axios? 
} 

Это вызывает ошибку «не может SetState на отмонтированной компоненте», когда я перейти на другой маршрут.

Так что я думаю, что я должен сделать, это удалить слушателя аксиом в компоненте. Как бы вы это сделали?

Answer 1

Очень простое решение может быть установлен флаг размонтирования и использовать его в резолюции обещание, например, так:

componentDidMount(){ 
    axios.post('mydomian.com/item/',this.state) 
    .then(function (response) { 
     if (this.unmounted) return; 
     const res = response.data 
     if (res.status === 'OK') { 
      this.setState({items :res.list}) 
     }else{ 
      console.log('can not load data', response) 
     } 
    }.bind(this)) 
} 
componentWillUnmount(){ 
    this.unmounted = true; 
} 

Answer 2

меня найти большое решение, которое было определено istarkov

const makeCancelable = (promise) => { 
    let hasCanceled_ = false; 

    const wrappedPromise = new Promise((resolve, reject) => { 
    promise.then((val) => 
     hasCanceled_ ? reject({isCanceled: true}) : resolve(val) 
    ); 
    promise.catch((error) => 
     hasCanceled_ ? reject({isCanceled: true}) : reject(error) 
    ); 
    }); 

    return { 
    promise: wrappedPromise, 
    cancel() { 
     hasCanceled_ = true; 
    }, 
    }; 
}; 

Как использовать:

const somePromise = new Promise(r => setTimeout(r, 1000)); 

const cancelable = makeCancelable(somePromise); 

cancelable 
    .promise 
    .then(() => console.log('resolved')) 
    .catch(({isCanceled, ...error}) => console.log('isCanceled', isCanceled)); 

// Cancel promise 
cancelable.cancel(); 

решение было найдено there.

Моя реализация.

Внутри моей функции

const promiseShareByEmail = makeCancelable(this.props.requestShareByEmail(obj.email, obj.url)); 

      promiseShareByEmail.promise.then(response => { 
       const res = response.data; 

       if (res.code != 0) 
        throw new Error(res.message); 
       this.setState({ 
        message: { 
         text: TextMeasurements.en.common.success_share_test, 
         code: Constants.ALERT_CODE_SUCCESS 
        } 
       }); 
      }).catch(err => { 
       if (err.isCanceled) 
        return; 

       this.setState({ 
        message: { 
         text: err.message, 
         code: Constants.ALERT_CODE_ERROR 
        } 
       }) 
      }); 

      this.promiseShareByEmail = promiseShareByEmail; 

this.props.requestShareByEmail(obj.email, obj.url), что функция возвращает обещание от Аксиос.

, когда компонент будет отключать функцию отмены.

componentWillUnmount() { 
     this.promiseShareByEmail.cancel(); 
    } 

наслаждаться.