主页 / 问题 / 680034
Accepted
ravend
Asked:2020-06-16 18:11:51 +0000 UTC2020-06-16 18:11:51 +0000 UTC

如何取消抓取？

  • 772

在表单过滤器 + 网格上

我通过 fetch 从后面获取数据

网格用接收到的数据更新

请求很重/很长

当用户在前一个请求完成之前生成一个新请求时，就会出现问题

网格中的内容被多次更新

是否有可能以某种方式中断/放弃“过时”的请求？

PS 在 clearTimeout / setTimeout 中包装 fetch 在这种情况下无济于事

PSS或者如何检查接收到的数据是否是上次promis的结果？

UPDATE

翻页ReactJS

发布代码不会给任何东西，tk。一般问题

情况是没有“FIND”按钮，请求是为过滤器中的每个“喷嚏”生成的

包含 10 个字段和下拉列表的巨大过滤器

出于客户的意识形态原因，在每次请求时禁用它是行不通的

我看到唯一的选择是拒绝或忽略过时的请求

但想看看BEST PRACTICES

UPDATE2

class View extends Component {

    ...

    updateItems(data) {
        self.state.timeoutItems && clearTimeout(self.state.timeoutItems);
        self.state.timeoutItems = setTimeout(() => {
            self.props.onGetItems(self.calcParams());
        }, config.timeoutItems );
    }  
}


export default connect(
    state => ({
        items: state.items
    }),
    dispatch => ({
        onGetItems: (o) => {
            dispatch(getItems(o));
        }
    })
)(View);

... 

export const getItems = (o = {}) => dispatch => {

    ...

    fetch(url, {  
        method: 'GET',              
        headers: {
            "Content-type": "application/json",
            "Accept": "application/json"
        },  
    })
    .then( (response) => response.json() )
    .then((data) => {

        ==>> (1) <<==

        dispatch({ type: 'FETCH_ITEMS_SUCCESS', data: data });
    })  
    .catch((error) => {
        console.log('Request failed', error);  
    });
}

是否可以在第（1）点确定结果与哪个承诺相关？

javascript

2 个回答

  1. Best Answer

    目前fetch还不能原生取消，这是因为它使用了Promise-ov机制，也没有中断机制。因此，您必须设计并编写拐杖

    有一个 axios 库，它也使用Promise它，虽然它似乎仍然适用于标准库XMLHttpRequest，但有一个选项可以取消它：

    var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

    如果你想使用原生的，你fetch现在必须自己编写请求取消的实现（即使那样，这也不是真正的请求取消，因为响应无论如何都会来，你只是忽略它）

    更新程序

    关于这个话题的讨论

    • 3

  2. fetch 没有办法取消，似乎也不是预料之中的。

    您可以选择最新的一个并像这样绘制它：

    let counter = 0; // Флаг итератора количества запросов

function buildRequest(){
  console.info(`Запрос #${counter + 1} послан`);
  makeRequest(++counter); // Новый запрос получает более большое число
}

function makeRequest(num){
  setTimeout(_ => {
    if(counter > num){ // Если итератор больше текущего числа, значит был запрос позже, выходим
      console.info(`Запрос #${num} отменён, есть запросы позже`);
      return;
    }
    
    // Иначе рисуем ответ
    console.info(`Запрос #${num} начинает отрисовку`);
  }, 1000);
}

buildRequest();
setTimeout(_ => buildRequest(), 500);
setTimeout(_ => buildRequest(), 1000);

    但是服务器仍然会在处理器的汗水下工作。

    否则，要么将请求排队，要么让过滤器在请求时阻塞。

    • 0

相关问题