Promise的静态方法.all与.race的用法,搭配Ajax的XMLHttpRequest教学

2023-11-07

首先是server.js文件内容,这里面的内容是用来开启一个node服务器,待会儿请求数据的时候需要用到:

const express = require('express')

var app = express()

app.get('/first',function(req,res){
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send("hello Ajax1")
})

app.get('/second',function(req,res){
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send("hello Ajax2")
})

app.get('/third',function(req,res){
    res.setHeader('Access-Control-Allow-Origin','*')
    res.send("hello Ajax3")
})

app.listen(8080,function(){
    console.log("8080端口已开启")
})

nodemon server.js运行

接下来是index.html内容:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    </body>
    <script>

        function qurryData(url) {  
            return new Promise(function(resolve,reject){
                let xhr = new XMLHttpRequest()
                xhr.open('get',url)
                xhr.send(null)

                xhr.onreadystatechange = function(){
                    if(xhr.readyState !== 4)return;
                    if(xhr.readyState == 4 && xhr.status === 200){
                        resolve(xhr.responseText)
                    }else{
                        reject('error')
                    }
                }
            })
       }
       let p1 = qurryData('http://localhost:8080/first')
       let p2 = qurryData('http://localhost:8080/second')
       let p3 = qurryData('http://localhost:8080/third')
       //all要等所有的都执行完才打印
       Promise.all([p1,p2,p3]).then(function(result){
          console.log('all 里面的结果:' + result)
       })
       //race是谁第一个执行完就打印谁
       Promise.race([p1,p2,p3]).then(function(result){
          console.log('race 里面的结果:' + result)
       })
        // race比all先打印
        //所以最后结果是:
        // race 里面的结果:hello Ajax1 
        // all 里面的结果:hello Ajax1,hello Ajax2,hello Ajax3
    </script>
</html>

按F12打开控制台

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Promise的静态方法.all与.race的用法,搭配Ajax的XMLHttpRequest教学 的相关文章

  • 循环内的局部变量会被垃圾收集吗?

    我想知道将循环内引用的任何变量放在循环外是否更有效 或者它们可以像函数内的变量一样被垃圾收集吗 var obj key val for var i 0 i lt 10 i console log obj or for var i 0 i l
  • NodeJs读取JSON文件

    我正在使用 NodeJs 读取 json 文件 我的代码非常基本 var obj require sample json console log obj 0 Sample json 文件包含这样的字符串化 JSON sample good
  • 在 angularjs 模块初始化期间有条件地注入依赖项

    我有一个角度模块 我想有条件地将依赖项注入其中 IE var myapp angular module myapp ngRoute myappcontroller ngGrid I want to include ngGrid only i
  • Twitter Bootstrap 轮播在加载时自动播放

    使用twitter bootstrap框架 如何调用轮播来 自动滑动 这意味着当页面加载时 轮播会自动滚动 我尝试过 javascript onLoad click 函数 a 下一个链接的 但这不起作用 你应该这样做Twitter Boot
  • 变量前面加双下划线

    我的节点代码中有以下代码片段 var fs require fs fs readdir dirname function err files console log files 为什么变量 dirname 有双下划线 我知道一个下划线是私有
  • getElementsByClassName & IE8:对象不支持此属性或方法[重复]

    这个问题在这里已经有答案了 I know getElementsByClassName 不支持IE8 你知道我可以用什么来代替吗 我因错误而变得烦人 对象不支持此属性或方法 HTML 代码是 function sumar var elems
  • 如何在 javascript 或 jquery 中按尺寸对图像进行排序

    如何在 JavaScript 或 jQuery 中按尺寸对图像进行排序 我的代码如下 var imgsrc if document images length lt 1 alert No images to open return for
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • 模型不是 AngularJS 中输入的日期对象

    使用 AngularJS 我试图使用输入显示日期type date
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • 如何正确删除动画集中引用的 Raphael SVG 元素?

    我有一组动画 Raphael SVG 元素 我正在通过用户发起的 ajax 调用添加新元素并删除旧元素 我 set push 新元素 但因为我需要删除的元素通常不是集合中的最后一个元素 所以我使用 element remove 而不是 se
  • 更改特定字符串的颜色

    有谁知道如果将特定单词输入文本区域 我如何更改它的颜色 例如 如果用户输入 你好我的朋友 它会动态地将 你好 更改为绿色 在google上花了很多时间 找不到任何相关的东西 谢谢 textareas 的设计目的不是选择性着色
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • 表单序列化javascript(无框架)

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • window.open 使用 css 样式

    我想设计我的 window open 目前 我的网页上有一些项目由于解析了某个类而打开 然后在新窗口中打开指定的文本 我想更改字体大小 字体和填充等 这是我的 JavaScript 代码
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • Morgan Logger + Express.js:写入文件并在控制台中显示

    我正在尝试将 Morgan 与 Express js 结合使用来编写日志文件 同时也在控制台上显示我的日志 我正在使用这段代码 var logger require morgan var accessLogStream fs createW
  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht

随机推荐

  • readme for esoe tools

    Pack hta Pack hta is a tool of ESOE to pack js files It s also a demo of ESOE It has below features file New Open Saveed
  • L->data 与 L.data比较

    L gt data 与 L data比较 当L是结构体 类的 指针时 用L gt data指明结构体中的变量 面向对象中 类的对象 而当L data则是结构体变量 类的对象 用L data表示
  • docker 容器绑定hosts

    问题 最近有个需求需要在docker容器里进行hosts绑定 尝试了将hosts 写在Dockerfile里 构建出镜像 但是启动容器后绑定的hosts会丢失 而且手动进入容器绑定hosts后 重启容器后hosts也会丢失 原因 简单的说
  • tensorflow的归一化与梯度下降

    代码 coding utf 8 By author MZ import numpy as np from sklearn datasets import load boston import tensorflow as tf from sk
  • Linux下查询比较大的文件命令

    size medium color blue b Linux下查询很大文件的快速命令 b color size find usr sersync type f size 3k color green size medium 这个命令意思是
  • linux backlog,linux下backlog设置 - 就爱阅读网

    当业务有高并发的情况的时候 需要调整backlog 对于PHP而言 需要注意以下3方面 1 操作系统 sysctl 2 web端 nginx 3 php后端 php fpm 操作系统以Ubuntu为例 编辑默认配置文件 etc sysctl
  • C++: 输入二进制以十进制显示

    C 输入二进制以十进制显示 代码展示 代码展示 输入二进制以十进制显示 include
  • regsvr32 /i hhctrl.ocx出现无法注册

    运行 输入regsvr32 i hhctrl ocx出现无法注册hhctrl ocx 无法找到dllinstall输入点 无法注册这个文件 在另一台电脑c windows system32 itss dll拷这个文件过去另一电脑的同一路径
  • C++派生类含有成员对象构造函数析构函数顺序

    参考博客 传送门1 当类中含有对象成员时 类的构造函数要包含对成员对象的初始化 如果构造函数的成员初始化列表没有包含对成员对象的初始化 系统会自动调用成员对象的无参构造函数 顺序上 先调用成员对象的构造函数 当所有的成员对象都执行了自身类的
  • 【目录贴】关于人生、学习的阶段性总结和小窍门(2021及以前)

    关于人生小窍门 自己总结 杂谈 过往时期 知乎 zhihu com 以小见大 杂记过往历程 杂谈 给本科实验室的分享PPT 知乎 zhihu com 一步一步推演出正确的观念 其实就是用来勉励大家学习的一文 杂谈 给本科实验室的分享PPT
  • VS2010默认库“MSVCRTD“,“LIBCMTD与其他库的使用冲突,请使用/NODEFAULTLIB:library

    vs2010 opencv库运行过程中的问题 链接警告 1 gt LINK warning LNK4098 默认库 MSVCRTD 与其他库的使用冲突 请使用 NODEFAULTLIB library 1 gt LINK warning L
  • c3p0数据库连接池自动重连的配置

    在Tomcat中配置c3p0数据库连接池的时候 如果数据库重启 或者网络原因造成服务器和数据库断开连接 Tomcat便再也不能和数据库连接 除非Tomcat服务重启 本人在使用VPN的时候遇到更换IP后数据库连接访问不到 解决办法是在c3p
  • 最新版抖音(20200624)去水印原理及源码,简单的原理与面临的挑战

    1 打开抖音链接 获取下图的这个item id 2 之后使用这个接口请求就ok了 https www iesdouyin com web api v2 aweme iteminfo item ids 6832178122364816644
  • 2023华为笔试机考题库【无向图染色】

    题目描述 给一个无向图染色 可以填红黑两种颜色 必须保证相邻两个节点不能同时为红色 输出有多少种不同的染色方案 输入描述 第一行 输入M 图中节点数 N 边数 后续N行格式为 V1 V2表示一个V1到V2的边 数据范围 1 lt M lt
  • linux内核-系统调用execve()

    读者在linux内核 系统调用fork vfork与clone中已经看到 进程通常是按其父进程的原样复制出来的 在多数情况下 如果复制出来的子进程不能与父进程分道扬镳 走自己的路 那就没多大意义 所以 执行一个新的可执行程序是进程生命历程中
  • GPU-Z

    TechPowerUp GPU Z GPU Z简介 硬件网站TechPowerUp现在又提供了一个类似的工具 用于显卡识别的GPU Z GPU Z是一款显卡测试的比较专业的软件 绿色免安装 界面直观 运行后即可显示GPU核心 以及运行频率
  • HBase(一)——HBase介绍

    HBase介绍 1 关系型数据库与非关系型数据库 1 关系型数据库 关系型数据库最典型的数据机构是表 由二维表及其之间的联系所组成的一个数据组织 优点 1 易于维护 都是使用表结构 格式一致 2 使用方便 SQL语言通用 可用于复杂查询 3
  • 正则表达式验证身份证号码

  • STL源码——关联式容器及其底层红黑树实现(上) 之 关联式容器详细介绍

    在侯捷老师源码剖析一书中对关联式进行源码剖析前先花了不少篇幅介绍红黑树的原理 这是因为关联式容器的底层依赖于RB Tree实现 因此想尝试在下篇剖析红黑树的源码 在此之前 先复习一下各个关联式容器的方法及容器之间的不同之处或许对红黑树的剖析
  • Promise的静态方法.all与.race的用法,搭配Ajax的XMLHttpRequest教学

    首先是server js文件内容 这里面的内容是用来开启一个node服务器 待会儿请求数据的时候需要用到 const express require express var app express app get first functio