AJAX进阶-day4

目录

同步代码和异步代码

回调函数地狱

[Promise - 链式调用](#Promise - 链式调用)

async函数和await

async函数和await_捕获错误

事件循环-EventLoop

宏任务与微任务

[Promise.all 静态方法](#Promise.all 静态方法)


同步代码和异步代码

同步代码: 逐行 执行,需 原地等待 结果 后,才继续向下执行
异步代码:调用后 耗时 ,不阻塞代码继续执行(不必原地等待),在 将来 完成后触发一个 回调函数

  1. 什么是同步代码?
    ➢ 逐行执行, 原地等待 结果 后,才继续向下执行
  2. 什么是异步代码?
    ➢ 调用后 耗时 ,不阻塞代码执行,将来完成后触发 回调函数
  3. JS 中有哪些异步代码?
    ➢ setTimeout / setInterval
    ➢ 事件
    ➢ AJAX
  4. 异步代码如何接收结果?
    ➢ 依靠 回调函数 来接收

回调函数地狱

概念:在回调函数中 嵌套回调函数 ,一直嵌套下去就形成了 回调函数地狱
缺点:可读性差,异常无法捕获,耦合性严重,牵一发动全身

Promise - 链式调用

概念:依靠 then() 方法会返回一个 新生成的 Promise 对象 特性,继续串联下一环任务,直到结束
细节:then() 回调函数中的 返回值 ,会影响新生成的 Promise 对象 最终状态和结果
好处:通过链式调用,解决回调函数嵌套问题

    let pname = ''
    axios({ url: 'http://hmajax.itheima.net/api/province' }).then(result => {
      pname = result.data.list[0]
      document.querySelector('.province').innerHTML = pname
      return axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
    }).then(result => {
      const cname = result.data.list[0]
      document.querySelector('.city').innerHTML = cname
      return axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
    }).then(result => {
      const area = (result.data.list[0])
      document.querySelector('.area').innerHTML = area
    })

async函数和await

概念: 在 async 函数内,使用 await 关键字取代 then 函数, 等待 获取 Promise 对象 成功状态的结果值

注意:await必须用在async修饰的函数内(await会阻止"异步函数内"代码继续执行,原地等待结果)

 async function getData() {
      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 areaObj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
      const area = areaObj.data.list[0]


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


    }
    getData()

async函数和await_捕获错误

try包裹可能产生错误的代码

如果try里某行代码报错后,try中剩余的代码不会执行了

事件循环-EventLoop


原因:JavaScript 单线程(某一刻只能执行一行代码),为了让耗时代码不阻塞其他代码运行,设计了 事件循环模型

定义:执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制,就叫事件循环

  1. 什么是事件循环?
    ➢ 执行代码 和收集异步任务,在调用栈空闲时,反复调用任务队列里回调函数执行机制
  2. 为什么有事件循环?
    ➢ JavaScript 是单线程的,为了 不阻塞 JS 引擎 ,设计执行代码的模型
  3. JavaScript 内代码如何执行?
    ➢ 执行同步代码,遇到 异步代码 交给 宿主 浏览器环境执行
    ➢ 异步有了结果后,把回调函数放入 任务队列排队
    ➢ 当调用栈 空闲 后,反复调用任务队列里的回调函数

宏任务与微任务

ES6 之后引入了 Promise 对象, 让 JS 引擎也可以发起异步任务
异步任务分为:
✓ 宏任务 :由 浏览器 环境执行的异步代码
✓ 微任务 :由 JS 引擎 环境执行的异步代码

JavaScript 内代码如何执行?
➢ 执行第一个 script 脚本事件宏任务,里面 同步 代码
➢ 遇到 宏任务/微任务 交给宿主环境,有结果回调函数进入对应队列
➢ 当执行栈空闲时, 清空微任务 队列,再执行 下一个宏任务 ,从1再来
自己理解:当执行栈空闲时,优先执行 微任务 队列,因为 微任务是 由 JS 引擎 环境执行的异步代码

Promise.all 静态方法

概念:合并多个 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' } })

    const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
    // console.log(p);
    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('ul').innerHTML = htmlStr


    }).catch(error => {
      console.dir(error)
    })
相关推荐
EricWang135818 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning19 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人28 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00130 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
孤客网络科技工作室1 小时前
AJAX 全面教程:从基础到高级
android·ajax·okhttp
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员