记录一下今天上班实战开发实现的一个功能:有两个异步请求,要求前面一个请求完成,拿前一个请求的结果,请求下一条数据。
旨在记录,有不足之处请多多指教。废话不多说,开撸!
第一种思路:使用 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() 中的函数,可以在这个函数中进行错误处理。
处理完毕!!!撒花!!