js利用递归与promise 按顺序请求数据的方法

下面是详细讲解 "JS利用递归与Promise按顺序请求数据的方法" 的完整攻略。

一、什么是递归

递归是一种算法思想，它通过反复调用自身，将问题转化为一个或多个小的同类问题来求解。在JS中，递归通常被用来解决树形结构或嵌套结构数据遍历问题。下面是一个简单的递归示例：

function countdown(num) {
  console.log(num);
  if (num > 0) {
    countdown(num - 1);
  }
}

countdown(5);

上述代码会从数字 5 开始倒数，直到数字为 0。

二、什么是Promise

Promise 是一种异步编程的解决方案，用于解决回调函数嵌套带来的问题。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise 对象会返回一个 promise 对象，代码会立即继续执行，然后在后面再进行处理。下面是一个简单的 Promise 示例:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const http = new XMLHttpRequest();
    http.open('GET', url, true);
    http.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(this.response);
        } else {
          reject(new Error(this.statusText));
        }
      }
    };
    http.onerror = function() {
      reject(new Error('Network Error'));
    };
    http.send();
  });
}

// 使用 Promise 进行链式请求
fetchData('/api/data1').then(data1 => {
  console.log(data1);
  return fetchData(`/api/data2?id=${data1.id}`);
}).then(data2 => {
  console.log(data2);
  return fetchData(`/api/data3?id=${data2.id}`);
}).then(data3 => {
  console.log(data3);
}).catch(error => {
  console.error(error);
});

上述代码会依次请求 /api/data1、/api/data2 和 /api/data3 接口，并将它们的结果输出到控制台上。

三、递归与Promise按顺序请求数据的方法

有时候，我们需要按照一定的顺序请求多个接口数据并进行处理，这个时候递归与 Promise 就可以发挥出最大的作用。

下面是一个按顺序请求多个接口数据的递归与 Promise 示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const http = new XMLHttpRequest();
    http.open('GET', url, true);
    http.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(JSON.parse(this.response));
        } else {
          reject(new Error(this.statusText));
        }
      }
    };
    http.onerror = function() {
      reject(new Error('Network Error'));
    };
    http.send();
  });
}

function sequenceRequest(urls) {
  let promise = Promise.resolve();
  let results = [];

  function handleResult(result) {
    results.push(result);
    return results;
  }

  function handleFetch(url) {
    return () => fetchData(url).then(handleResult);
  }

  urls.forEach(url => {
    promise = promise.then(handleFetch(url));
  });

  return promise.then(() => results);
}

sequenceRequest(['/api/data1', '/api/data2', '/api/data3']).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

上述代码会依次请求 /api/data1、/api/data2 和 /api/data3 接口，并将它们的结果输出到控制台上。

另外，还可以使用 async/await 语法糖实现异步请求，使代码更加简单易懂。

下面是一个使用 async/await 语法糖实现异步请求的示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const http = new XMLHttpRequest();
    http.open('GET', url, true);
    http.onreadystatechange = function() {
      if (this.readyState === 4) {
        if (this.status === 200) {
          resolve(JSON.parse(this.response));
        } else {
          reject(new Error(this.statusText));
        }
      }
    };
    http.onerror = function() {
      reject(new Error('Network Error'));
    };
    http.send();
  });
}

async function sequenceRequest(urls) {
  let results = [];

  for (let i = 0; i < urls.length; i++) {
    const result = await fetchData(urls[i]);
    results.push(result);
  }

  return results;
}

sequenceRequest(['/api/data1', '/api/data2', '/api/data3']).then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});

上述代码会依次请求 /api/data1、/api/data2 和 /api/data3 接口，并将它们的结果输出到控制台上。

通过以上两个示例可以看到，递归与 Promise 可以灵活地组合，并且可以帮助我们解决复杂的异步请求问题。