前端学习——ajax (Day4)

这篇具有很好参考价值的文章主要介绍了前端学习——ajax (Day4)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

同步代码和异步代码

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax

回调函数地狱和 Promise 链式调用

回调函数地狱

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax

Promise - 链式调用

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax

<!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_链式调用</title>
</head>

<body>
  <script>
    /**
     * 目标:掌握Promise的链式调用
     * 需求:把省市的嵌套结构,改成链式调用的线性结构
    */
    // 1. 创建Promise对象-模拟请求省份名字
    const p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('北京市')
      }, 2000)
    })

    // 2. 获取省份名字
    const p2 = p.then(result => {
      console.log(result)
      // 3. 创建Promise对象-模拟请求城市名字
      // return Promise对象最终状态和结果,影响到新的Promise对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(result + '--- 北京')
        }, 2000)
      })
    })

    // 4. 获取城市名字
    p2.then(result => {
      console.log(result)
    })

    // then()原地的结果是一个新的Promise对象
    console.log(p2 === p)
  </script>
</body>

</html>

async函数和await

前端学习——ajax (Day4),前端,学习,ajax

<!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>async函数和await_解决回调函数地狱</title>
</head>

<body>
  <form>
    <span>省份:</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市:</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区:</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:掌握async和await语法,解决回调函数地狱
     * 概念:在async函数内,使用await关键字,获取Promise对象"成功状态"结果值
     * 注意:await必须用在async修饰的函数内(await会阻止"异步函数内"代码继续执行,原地等待结果)
    */
    // 1. 定义async修饰函数
    async function getData() {
      // 2. await等待Promise对象成功的结果
      const pObj = await axios({url: 'http://hmajax.itheima.net/api/province'})
      const pname = pObj.data.list[0]
      const cObj = await axios({url: 'http://hmajax.itheima.net/api/city', params: { pname }})
      const cname = cObj.data.list[0]
      const aObj = await axios({url: 'http://hmajax.itheima.net/api/area', params: { pname, cname }})
      const areaName = aObj.data.list[0]


      document.querySelector('.province').innerHTML = pname
      document.querySelector('.city').innerHTML = cname
      document.querySelector('.area').innerHTML = areaName
    }

    getData()
  </script>
</body>

</html>

前端学习——ajax (Day4),前端,学习,ajax

<!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>async函数和await_错误捕获</title>
</head>

<body>
  <form>
    <span>省份:</span>
    <select>
      <option class="province"></option>
    </select>
    <span>城市:</span>
    <select>
      <option class="city"></option>
    </select>
    <span>地区:</span>
    <select>
      <option class="area"></option>
    </select>
  </form>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标:async和await_错误捕获
    */
    async function getData() {
      // 1. try包裹可能产生错误的代码
      try {
        const pObj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
        const pname = pObj.data.list[0]
        const cObj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
        const cname = cObj.data.list[0]
        const aObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
        const areaName = aObj.data.list[0]

        document.querySelector('.province').innerHTML = pname
        document.querySelector('.city').innerHTML = cname
        document.querySelector('.area').innerHTML = areaName
      } catch (error) {
        // 2. 接着调用catch块,接收错误信息
        // 如果try里某行代码报错后,try中剩余的代码不会执行了
        console.dir(error)
      }
    }

    getData()
  </script>
</body>

</html>

事件循环-EventLoop

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax

宏任务与微任务

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax

Promise.all 静态方法

前端学习——ajax (Day4),前端,学习,ajax
前端学习——ajax (Day4),前端,学习,ajax文章来源地址https://www.toymoban.com/news/detail-600779.html

<!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
    */
    // 1. 请求城市天气,得到Promise对象
    const bjPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '110100' } })
    const shPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '310100' } })
    const gzPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440100' } })
    const szPromise = axios({ url: 'http://hmajax.itheima.net/api/weather', params: { city: '440300' } })

    // 2. 使用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>

到了这里,关于前端学习——ajax (Day4)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • c++学习(day4)

    友元是一种定义在类外部的普通函数或类 1.1 全局函数作为友元函数 声明一个全局函数作为类的友元函数,则允许该全局函数,访问类中各个权限下的成员 在类中要将该函数进行声明:friend 全局函数头; 1.2 类的成员函数作为友元函数(了解) 声明一个其他类的成员函数作

    2023年04月23日
    浏览(31)
  • 微服务学习Day4

    2024年02月19日
    浏览(33)
  • day4 驱动开发 c语言学习

    不利用系统提供的register_chrdev,自己实现字符设备的注册 底层代码 led.c 应用层代码 app.c 头文件 head.h

    2024年02月14日
    浏览(39)
  • 【Node.js学习 day4——模块化】

    什么是模块化与模块? 将一个复杂的程序文件依据一定规则(规范)拆分成多个文件的过程称之为 模块化 其中拆分的 每个文件就是一个模块 ,模块的内部数据是私有的,不过模块可以暴露内部数据以便其他模块使用。 什么是模块化项目? 编码时是按照模块一个一个编码的

    2024年01月16日
    浏览(49)
  • 【C++】day4学习成果:仿写string类等等

    1.仿照string类,完成myString 类 代码: 运行结果: 2.思维导图

    2024年02月09日
    浏览(38)
  • 数据结构与算法学习(day4)——解决实际问题

    在本章的学习此前,需要复习前三章的内容,每个算法都动手敲一遍解题。宁愿学慢一点,也要对每个算法掌握基本的理解! 前面我们学习了简化版桶排序、冒泡排序和快速排序三种算法,今天我们来实践一下前面的三种算法。 本章的学习目标: (1)回顾三个算法的基本原

    2024年02月09日
    浏览(54)
  • 数学建模学习笔记day4——层次化分析

    层次分析主要有三大典型应用 (1)用于最佳方案的选取 (2)用于评价类问题 (3)用于指标体系的优选 层次分析法是根据问题的性质和要达成的目标,将问题分解为不同的组成因素,将因素按不同层次聚集组合,形成一个多层次的分析结构模型,最终问题归结为最低层(决

    2024年02月09日
    浏览(42)
  • 初识C语言——详细入门(系统性学习day4)

    目录 前言 一、C语言简单介绍、特点、基本构成 简单介绍: 特点: 基本构成: 二、认识C语言程序 标准格式: 简单C程序: 三、基本构成分类详细介绍    (1) (2)数据类型 计算机中常用存储单位 数据类型的取值范围 打印输入类型 (3)常量和变量 常量的分类:

    2024年02月08日
    浏览(37)
  • Vue3学习日记 Day4 —— pnpm,Eslint

    注:此课程需要有Git的基础才能学习 1、使用原因     1.1、速度快,远胜过yarn和npm     1.2、节省磁盘空间   2、使用方式     2.1、安装方式         npm install -g pnpm     2.2、创建项目         pnpm create vue     1、禁用Prettier插件(如果安装了) 2、安装Eslint插件,并配置保存

    2024年04月12日
    浏览(34)
  • Go语言学习查缺补漏ing Day4

    Go语言学习查缺补漏ing Day4 一、掌握iota的使用 请看下面这段代码: 思考一下输出结果会是什么? 先不公布输出结果。先来谈一谈iota,iota是用于给需要自增长常量赋值的标识符。我们可以用下划线 _ 来省略掉不想要的值。而我们中间给变量赋值了,然后如果后续的变量如果

    2024年02月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包