首页 > 其他分享 >Promise.all静态方法

Promise.all静态方法

时间:2023-11-08 17:33:19浏览次数:37  
标签:axios 静态方法 api Promise weather const net

前言

AJAX的学习到这里就告一段落了,后面会做个小项目巩固之前学过的知识。后面会继续学习Node.js以及Git等知识。

一、概念

合并多个Promise对象,等待所有同时成功完成(或某一失败),做后续逻辑Promise.all静态方法_html

二、语法

Promise.all静态方法_.net_02

三、案例示例

需求:同时请求“北京”,“上海”,“广州”,“深圳”的天气并在网页上尽可能同时显示

Promise.all静态方法_html_03

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的all方法</title>
</head>

<body>
  <ul class="my-ul"></ul>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:掌握Promise的all方法作用,和使用场景
     * 业务:当我需要同一时间显示多个请求的结果时,就要把多请求合并
     * 例如:默认显示"北京", "上海", "广州", "深圳"的天气在首页查看
     * code:
     * 北京-110100
     * 上海-310100
     * 广州-440100
     * 深圳-440300
    */
	 //请求城市天气,得到Promise对象
    const bjPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'https://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    //使用Promise.all,合并多个Promise对象
    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    p.then(result => {
      console.log(result)
      const htmlStr = result.map(item => {
        return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
      }).join('')
      document.querySelector('.my-ul').innerHTML = htmlStr
    }).catch(error => {
      console.dir(error)
    })
  </script>
</body>

</html>

Promise.all静态方法_ios_04

标签:axios,静态方法,api,Promise,weather,const,net
From: https://blog.51cto.com/u_15858858/8257016

相关文章

  • typescript 中的 Promise 类型定义中为何忽略了错误处理的类型?
    在TypeScript中的Promise类型定义中忽略了错误处理的类型是因为Promise类型的设计初衷是用于处理异步操作的结果,即成功或失败。当Promise成功时,它会返回一个值;而当Promise失败时,则会抛出一个错误。在Promise的类型定义中,只关注了成功的结果类型,而忽略了错误处理的类型......
  • 关于批量按顺序下载(reduce+promise)
    参考文章promiseresolverejecthttps://www.cnblogs.com/lunlunshiwo/p/8852984.html#4917337reduce按顺序调用https://juejin.cn/post/7030625338065420302?searchId=202311041036275432B88F9F3A984960AA注意点promise结果的使用reduce中的等待结果数组的存储运行截......
  • python @staticmethod 静态方法的使用
    `@staticmethod`是Python中的一个装饰器,用于将一个方法声明为静态方法。静态方法是一种不需要访问类实例的方法,可以直接通过类名调用,而不需要创建类的实例。静态方法的使用场景包括:1.辅助类或工具类:静态方法可以用于辅助其他类或提供一些通用的工具功能,而不需要与类的实例进......
  • java如何不创建对象就可以使用静态方法(类方法)System类等
    对象初始化一定有类加载,但是类加载不一定会对象初始化,静态方法不需要创建对象就能调用,这是因为静态方法属于类而不是对象。在Java中,静态方法是属于类的方法,而不是属于特定的对象实例的方法。当类加载到内存中时,静态方法也会加载到内存中。因此,可以直接通过类名来调用静态方法,而不......
  • [Azure Developer]把Azure Function中ILogger对象静态化为静态方法提供日志记录
    问题描述在AzureFunction代码中,有默认的ILogger对象来记录函数的日志,如果函数引用了一些静态对象,是否有办法使用这个默认的ILogger对象来记录日志呢?usingSystem.Net;usingMicrosoft.Azure.Functions.Worker;usingMicrosoft.Azure.Functions.Worker.Http;usingMicrosoft.Ext......
  • [Azure Developer]把Azure Function中ILogger对象静态化为静态方法提供日志记录
    问题描述在AzureFunction代码中,有默认的ILogger对象来记录函数的日志,如果函数引用了一些静态对象,是否有办法使用这个默认的ILogger对象来记录日志呢?usingSystem.Net;usingMicrosoft.Azure.Functions.Worker;usingMicrosoft.Azure.Functions.Worker.Http;usingMicrosoft......
  • C++多线程——async、packages_task、promise
    异步编程async、future基本概念和使用:异步执行函数:std::async可以异步执行一个函数,这意味着函数将在后台线程中执行,而当前线程可以继续执行其他任务。返回值获取:你可以获得函数的返回值,或者得到一个std::future对象,它允许你在将来的某个时刻获取函数的结果。线程......
  • python面向对象-学习笔记(三、类方法、实例方法、静态方法)
    方法相关方法的概念描述一个目标的行为动作和函数相似封装了一系列行为动作。比如一个人怎么吃,怎么喝,怎么玩...都可以被调用最主要区别:调用方式方法的划分实例方法:默认第一个参数是一个实例类方法:默认第一个参数是类静态方法:没有默认参数注意划分的依据:方法的第一......
  • 前端多线程处理 —— Promise对象
    在前端编程中,处理一些简短、快速的操作,在主线程中就可以完成。但是,在处理一些耗时比较长以至于比较明显的事情,比如读取一个大文件或者发出一个网络请求,就需要子线程来完成,以避免只用单线程时造成页面一时无法响应的事情。以发送网络请求为例,在以往的JavaScript中,使用多个回调函......
  • [Compose] Async generator, Promise + generator
    functiongetData(d){setTimeout(()=>{if(typeofd==="number"){run.next(d/2)}else{run.next(d)}},500)}function*gen(){varx=1+(yieldgetData(10))//x=1+5......