promise同时去请求多个接口,去请求数据,去到之后拼成一个大的数据,然后在页面上渲染,这种情况该怎么实现呢?
时间: 2024-03-17 11:47:00 浏览: 94
vue中实现先请求数据再渲染dom分享
在 JavaScript 中,我们可以使用 Promise.all() 方法来实现同时请求多个接口,并在所有接口请求完成后拼接数据并渲染页面。
具体实现步骤如下:
1. 创建一个 Promise 数组,每个 Promise 对象都代表一个接口请求。
2. 使用 Promise.all() 方法传入 Promise 数组,等待所有接口请求完成。
3. 在 Promise.all() 的回调函数中,可以获取到所有接口请求返回的数据,进行拼接并渲染页面。
示例代码如下:
```
const promise1 = fetch('url1');
const promise2 = fetch('url2');
const promise3 = fetch('url3');
Promise.all([promise1, promise2, promise3])
.then(responses => Promise.all(responses.map(res => res.json())))
.then(dataArr => {
// 在这里可以将所有接口返回的数据进行拼接,并渲染页面
const finalData = dataArr.reduce((acc, data) => {
return [...acc, ...data];
}, []);
console.log(finalData);
})
.catch(error => console.log(error));
```
在这个例子中,我们使用 fetch() 方法来发起接口请求,Promise.all() 方法等待所有请求完成,然后使用 map() 和 json() 方法来将所有返回数据转换成 JSON 格式。最后将所有数据进行拼接,并输出到控制台上。
希望这个例子能够帮助到你。
阅读全文