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教学 的相关文章

  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • Web 串行 API - 未捕获(承诺中)DOMException:无法打开串行端口/所需成员 baudRate 未定义

    下面的代码可以在我的 Xubuntu 机器上运行 但现在我在 Kubuntu 上 它不再工作了 它不会打开端口 Arduino IDE 工作正常 可以向开发板写入代码 并且我可以在 Chrome 中选择设备 Arduino Uno 但当我尝
  • 解析“流”JSON

    我在浏览器中有一个网格 我想通过 JSON 将数据行发送到网格 但浏览器应该在接收到 JSON 时不断解析它 并在解析时将行添加到网格中 换句话说 在接收到整个 JSON 对象后 不应将行全部添加到网格中 应该在接收到行时将其添加到网格中
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Javascript正则表达式用于字母字符和空格? [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我需要一个
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • ajax4jsf死了吗?还有哪些其他适用于 JSF 的 AJAX 库?

    我目前正在使用JBoss RichFaces http www jboss org jbossrichfaces 我正在从事的项目的 JSF 组件库 一般来说 它工作得很好 特别是 ajax4jsf A4J 提供的 AJAX 支持 但我发现
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Javascript 数组到 VBScript

    我有一个使用 Javascript 构建的对象数组 我需要使用 VBScript 读取它 如下例所示 我找不到在 VbScript 代码中循环遍历数组的方法myArray object 这个例子是我的问题的简化 我无法更改页面的默认语言 这
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Javascript 纪元时间(以天为单位)

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 长轮询会冻结浏览器并阻止其他 ajax 请求

    我正在尝试在我的中实现长轮询Spring MVC Web 应用程序 http static springsource org spring docs 2 0 x reference mvc html但在 4 5 个连续 AJAX 请求后它会
  • 按 Esc 按键关闭 Ajax Modal 弹出窗口

    我已经使用 Ajax 显示了一个面板弹出窗口 我要做的是当用户按 Esc 键时关闭该窗口 这可能吗 如果有人知道这一点或以前做过这一点 请帮助我 Thanks 通过以下链接 您可以通过按退出按钮轻松关闭窗口 http www codepro
  • 在 React.js 中编辑丰富的数据结构

    我正在尝试为数据结构创建一个简单的基于网格的编辑器 但我在使用 React js 时遇到了一些概念问题 他们的文档对此没有太大帮助 所以我希望这里有人可以提供帮助 首先 将状态从外部组件传输到内部组件的正确方法是什么 是否有可能将内部组件中

随机推荐

  • 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