请求时序问题 - 图1

解决方案：

1.请求1还没有结果返回时，不允许发起请求2，通过loading或控制触发按钮，事件形式实现；
2.取消慢接口的请求。

正确的打开方式：

通过取消慢接口请求，可解决异步请求时序问题引起的搜索关键词跟结果存在不一致的问题：

1.fetch方式：

使用 fetch 发起一个 post 请求：

  1. fetch('http://localhost:3000/getList', {
  2.    method: 'POST',
  3. 　　headers: {
  4. 　　　　'Content-Type': 'application/json;charset=utf-8'
  5. 　　},
  6. 　　body: JSON.stringify({
  7.     id: 1
  8. 　　})
  9. }).then(result => {
  10.   console.log('result', result);
  11. });

可以使用AbortController来实现请求取消：

  1. this.controller?.abort(); // 重新发起 http 请求之前，取消上一次请求
  3. const controller = new AbortController(); //  创建 AbortController 实例
  4. const signal = controller.signal;
  5. this.controller = controller;
  7. fetch('http://localhost:3000/getList', {
  8.    method: 'POST',
  9. 　　headers: {
  10. 　　　　'Content-Type': 'application/json;charset=utf-8'
  11. 　　},
  12. 　　body: JSON.stringify({
  13.     id: 1
  14. 　　}),
  15.   signal, // 信号参数，用来控制 http 请求的执行
  16. }).then(result => {
  17.   console.log('result', result);
  18. });

2.axios方式：

发起 post 请求：

  1. axios.post('http://localhost:3000/getList', {
  2.   headers: {
  3.     'Content-Type': 'application/json;charset=utf-8'
  4.   },
  5.   data: {
  6.     id: 1,
  7.   },
  8. })
  9. .then(result => {
  10.   console.log('result:', result);
  11. });

axios 发起的请求可以通过 cancelToken 来取消。

  1. this.source?.cancel('The request is canceled!');
  3. this.source = axios.CancelToken.source(); // 初始化 source 对象
  5. axios.post('http://localhost:3000/getList', {
  6.   headers: {
  7.     'Content-Type': 'application/json;charset=utf-8'
  8.   },
  9.   data: {
  10.     id: 1,
  11.   },
  12. }, { // 注意是第三个参数
  13.   cancelToken: this.source.token, // 这里声明的 cancelToken 其实相当于是一个标记或者信号
  14. })
  15. .then(result => {
  16.   console.log('result:', result);
  17. });

3.XMLHttpRequest方式：

发起请求：

  1. var xhr1 = new XMLHttpRequest();
  2. xhr1.open('get', 'https://developer.mozilla.org', true);
  3. xhr1.send();
  4. xhr1.onreadystatechange= function () {
  5.   console.log(xhr.responseText, '-- respone');
  6. }

XMLHttpRequest调用对应的xhrInstance.abort() 会终止当前的请求：

  1. xhr1.abort();
  2. var xhr2 = new XMLHttpRequest();
  3. xhr2.open('get', 'https://developer.mozilla.org', true);
  4. xhr2.send();
  5. xhr2.onreadystatechange= function (){
  6.   console.log(xhr.responseText, '-- respone');
  7. }