【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示(使用Promise.all和Promise.race)

news/2024/7/11 0:11:28 标签: es6, ajax, okhttp

【ES6】一个页面上需要等两个或多个ajax的数据请求成功以后才正常显示(使用Promise.all和Promise.race)

  • Pomise
  • Pomise.all
  • Promise.race

Pomise

Pomise.all

  • Promise.all将多个Promise实例聚合成一个新的Promise实例。请求成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败的值(即如果有一个Pomise失败,则整个Pomise都返回失败)。
  • Promise.all获得的成功结果数组里的数据顺序和Promise.all接收到的数组顺序是一致的,即使Promise1的结果获取的比Promise2要晚。

具体代码如下

<template>
  <div id="app"></div>
</template>
<script>
import { getuser, getlist, getdetail } from "@/api/api";
export default {
  name: "App",
  data() {
    return {};
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取后端数据
    async getData() {
      let Promise1 = await getuser(); //调用成功
      let Promise2 = await getlist(); //调用成功
      let Promise3 = await getdetail(); //调用失败
      let Promise4 = await getdetail(); //调用失败
      Promise.all([Promise1, Promise2])
        .then((result) => {
          console.log(result); //[[用户信息], [用户列表]]
        })
        .catch((error) => console.log(`Error in promises ${error}`));

      Promise.all([Promise1, Promise2, Promise3, Promise4])
        .then((result) => {
          console.log(result); //调用失败。返回Promise3错误信息
        })
        .catch((error) => console.log(`Error in promises ${error}`));
    },
  },
};
</script>

Promise.race

  • Promise.race([Promise1, Promise2, Promise3])里面哪个结果返回得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

http://www.niftyadmin.cn/n/5354974.html

相关文章

解决方法UnicodeEncodeError: ‘gbk‘ codec can‘t encode character ‘\xa0‘ in position

解决方法UnicodeEncodeError: ‘gbk’ codec can’t encode character ‘\xa0’ in position 一般来说是全局内设置的Unicode没有起效果&#xff0c;应该在open内再次直接指定格式encoding 如&#xff1a; open("b.text","w") a.write(response.content…

NetCore iText7 根据PDF模板 导出PDF文件

iText 7 是一个用于处理 PDF 文件的流行的开源库&#xff0c;它提供了丰富的功能&#xff0c;包括创建、编辑和处理 PDF 文档。它支持 .NET 平台&#xff0c;因此可以在 .NET Core 中使用该库来处理 PDF 文件。 使用 iText 7&#xff0c;您可以进行以下操作&#xff1a; 1. 创…

【遇到问题-已解决】 ModuleNotFoundError: No module named ‘torchvision.models.utils‘

解决方案 1 首先&#xff0c;请确保你已经正确安装了torchvision。你可以使用以下命令来安装&#xff1a; pip install torchvision 2&#xff09; torchvision版本过高导致的错误&#xff0c;解决方法&#xff1a; 将from torchvision.models.utils import load_state_dict_f…

6.2 静态内存分配模式

Bruce Powel Douglass大师介绍-CSDN博客https://blog.csdn.net/ChatCoding/article/details/134665868 嵌入式软件开发从小工到专家-CSDN博客https://blog.csdn.net/ChatCoding/article/details/135297955 C嵌入式编程设计模式源码-CSDN博客https://blog.csdn.net/ChatCoding…

Mac安装配置JDK

Mac安装配置jdk 下载地址&#xff1a;https://www.oracle.com/java/technologies/downloads/#java8 下载jdk1.8及以上需要Oracle账号及密码 dokidoki811163.com\pass:Zywxmxbt1314… 安装jdk 双击安装包&#xff0c;点击.pkg&#xff0c;按照提示安装&#xff0c;配置环境之前…

Wpf中集合对象绑定所在ViewModel的属性

要将集合中的对象绑定到 ViewModel 中的 Command&#xff0c;可以使用 ItemContainerStyle 和 Button 的 Command 属性来实现。 下面是一个示例&#xff0c;假设你有一个 ViewModel 类&#xff0c;其中有一个名为 Items 的可绑定集合属性&#xff0c;该集合包含多个 Item 对象…

【JavaScript 漫游】【003】typeof null 返回 object 的原因

文章简介 本文为【JavaScript 专栏】的第 003 篇文章。 在上篇文章中&#xff0c;笔者简单记录了 typeof 运算符对 ES5 各数据类型的判断结果。其中&#xff0c;null、array 和 object 都判断为 object 类型。array 作为广义 object 的子类型&#xff0c;返回 object 尚可理解…

2401Idea用GradleKotlin编译Java控制台中文出乱码解决

解决方法 解决方法1 在项目 build.gradle.kts 文件中加入 tasks.withType<JavaCompile> {options.encoding "UTF-8" } tasks.withType<JavaExec> {systemProperty("file.encoding", "utf-8") }经测试, 只加 tasks.withType<…