当前位置：首页 > news >正文

前端（AJAX）学习笔记（CLASS 4）：进阶

news 来源：原创 2025/5/16 2:52:17

1、同步代码和异步代码

同步代码：浏览器按照书写代码的顺序一行一行去执行代码，逐行执行，需要原地等待结果后，才继续向下执行

异步代码：调用后耗时，不阻塞代码继续执行，在将来完成后触发一个回调函数

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

概念：在回调函数中嵌套回调函数，从而形成回调函数地狱

缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

promise-链式调用

概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束

细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果

例如：

    <script>

    const p=new Promise((resolve,reject) => {
        setTimeout(() => {
            //获取省份列表
            resolve('湖北省')
        },500)
    })

    p.then(res => {
        console.log(res)
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                //获取省份列表
                resolve(res+'武汉市')
            },500)
        })
    }).then(res => {
        console.log(res)
        return new Promise((resolve,reject) => {
            setTimeout(() => {
                //获取省份列表
                resolve(res+'黄陂区')
            },500)
        })
    }).then(res => {
        console.log(res)
    })

也就是将代码的嵌套换成了串式，不会形成回调地狱

每个promise对象中管理一个异步任务，用then返回promise对象，串联起来

3、async和await使用

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise

async关键字只能用在函数前，给函数进行修饰

await必须结合async使用

例如：

        async function getPro() {
            const res=await axios({url:'http://ajax-api.itheima.net/api/province'})
            const app=new Vue({
                el:'#province',
                data:{
                    pList:res.data.data,
                    pname:res.data.data[0]
                }
            })
        }

        getPro()

* 异常捕获

使用：try...catch

4、事件循环-EventLoop

概念：事件循环负责执行代码、收集和处理事件以及执行队列中的子任务

原因：JavaScript单线程，为了让耗时的代码不阻塞其他代码的执行，设计了事件循环模型

* 宏任务于微任务

异步任务分为：

宏任务：由浏览器环境执行的异步代码

微任务：由JS引擎环境执行的异步代码

任务（代码）	执行所在的环境
JS脚本执行任务	浏览器
setTimeout/setInterval	浏览器
AJAX请求完成事件	浏览器
用户交互事件等	浏览器

微任务：Promise对象.then()

Promise本身是同步的，而then和catch回调函数是异步的

5、Promise.all静态方法

概念：合并多个Promise对象，等待所有同时成功完成（或某一个失败），做后续逻辑

语法：

        const p=Promise.all([Promise对象,Promise对象,...])
        p.then(result => {
            //result结果：... 成功
        }).catch(error => {
            //error结果：第一个失败的对象
        })

可以实现，在依次发出请求后，实现同时渲染的功能，返回的结果为一个数组