js实现两个异步请求，要求前一个请求完成，拿前一个请求的结果，请求下一个数据。

记录一下今天上班实战开发实现的一个功能：有两个异步请求，要求前面一个请求完成，拿前一个请求的结果,请求下一条数据。

旨在记录，有不足之处请多多指教。废话不多说，开撸！

第一种思路：使用 async/await 语法来让两个异步请求有先后顺序执行

例如：

async getData() {
    
    
  // 发送第一个请求，获取 id
  const res1 = await this.$http.get('/api/get-id');
  const id = res1.data.id;

  // 使用 id 发送第二个请求
  const res2 = await this.$http.get(`/api/get-data?id=${
      
      id}`);
  console.log(res2.data);
}

在这个示例中，我们首先使用 await 关键字来等待第一个请求的响应。然后，我们获取响应数据中的 id，并使用这个 id 发送第二个请求。还可以在执行异步代码的函数中使用 try/catch 语句来捕获/处理错误。

但是，如果两个请求都写在不同的函数里面，在这个函数里面来请求其他函数的结果，再进行别的操作，就往往会出现，第一个函数的结果还没有收到，下一条请求就完成的现象。
例如以下代码：

async getData1() {
    
    
  // 发送第一个请求，获取 id
  const res1 = await this.$http.get('/api/get-id');
  this.id = res1.data.id;
}
async getData2() {
    
    
	await this.getData1()
	console.log(this.id) //此时的id就有可能为undefined；
  // 使用 id 发送第二个请求
  const res2 = await this.$http.get(`/api/get-data?id=${
      
      this.id}`);
  console.log(res2.data);
}

那要怎么解决这种情况呢？我就想到了第二种思路。

第二种思路：使用 Promise.then()来让两个异步请求有先后顺序执行

实现代码如下：

  getData1() {
    
    
    return new Promise((resolve, reject) => {
    
    
      // 发送第一个请求，获取 id
      this.$http.get('/api/get-id').then(({
     
      data }) => {
    
    
          this.id = data.id;
          resolve();
        }).catch(err => {
    
    
          console.log(err.msg);
          reject(err.msg);
        });
    })
  }
  getData2() {
    
    
    this.getData1().then(() => {
    
    
      console.log(this.id) //此时的id就会正常出来；
      // 使用 id 发送第二个请求
      this.$http.get(`/api/get-data?id=${
      
      this.id}`).then(({
     
      data }) => {
    
    
        console.log(data);
      }).catch(err2 => {
    
    
        console.log(err2.msg);
        reject(err2.msg);
      });
    }).catch(err => {
    
    
      console.log(err.msg);
      reject(err.msg);
    });
  }

这个思路主要是使用 Promise 来保证 getData1 函数的执行顺序。首先需要将 getData1 函数修改为返回一个 Promise 对象。在调用 getData1 的时候，使用 .then() 方法来执行后续操作。如果 执行出错，则会执行 .catch() 中的函数，可以在这个函数中进行错误处理。

处理完毕！！！撒花！！