文章/答案/技术大牛

发布

社区首页 >专栏 >ES6-Promise语法与原理

ES6-Promise语法与原理

小城故事

发布于 2024-08-24 00:52:31

10800

代码可运行

文章被收录于专栏：XC's Blog 日常笔记XC's Blog 日常笔记

运行总次数：0

代码可运行

01. Promise作用: 解决回调地狱

1.1 回调地狱: 异步回调层层嵌套

1.2 js代码分为2种: 同步(默认) 异步

同步: 按照顺序立即执行
异步: 没有顺序延迟执行 (事件、定时器、ajax)

1.3 层层嵌套:

// 1.1 一级分类
let xhr1 = new XMLHttpRequest()
xhr1.open('get', 'http://123.57.109.30:3999/api/categoryfirst')
xhr1.send()
xhr1.onload = function () {
    console.log('一级')
    console.log(JSON.parse(xhr1.response))

// 1.2 二级分类
let xhr2 = new XMLHttpRequest()
xhr2.open('get', 'http://123.57.109.30:3999/api/categorySecond?firstId=621')
xhr2.send()
xhr2.onload = function () {
    console.log('二级')
    console.log(JSON.parse(xhr2.response))

// 1.3 三级分类
let xhr3 = new XMLHttpRequest()
xhr3.open('get', 'http://123.57.109.30:3999/api/categoryThird?secondId=622')
xhr3.send()
xhr3.onload = function () {
    console.log('三级')
    console.log(JSON.parse(xhr3.response))
}
}
}
// 1.4 浏览器刷新打印顺序会不同
console.log(666)

02. Promise语法

2.1 调用构造函数创建Promise实例

// (resolve, reject) 是箭头函数的参数
let pro = new Promise((resolve, reject) => {
    // 异步代码
    setTimeout(function () {
    // resolve(1) // 成功 1是实参
       reject(2) // 失败
    }, 500)
})

2.2 调用Promise实例对象的then/catch方法

resolve本质就是调用res res是形参 resolve(1)是实参

// resolve和reject状态二选一的
pro.then(res => {
    console.log(res)
}).catch(error => {
// reject失败则调用catch方法
    console.log(error)
})

2.3 Promise在创建实例时里面代码会立即执行

Promise自己是同步的只有then方法才是异步的

03. Promise工作原理

3.1 Promise是什么? 是ES6新增的构造函数 3.2 Promise作用: 解决回调地狱 3.3 Promise应用场景/原理 Promise对象有三种状态:

pending 进行中(默认状态) 所以一旦创建Promise 里面代码会立即执行
fuifilled 已完成
rejected 已失败
Promise相当于是一个容器 把异步代码放入容器中
状态只能改变一次不管成功/失败都会有一个数据结果

4. Promise对象状态只有两种状态:

调用resolve()方法时: 从pending变为fuifilled
调用reject()方法时: 从pending变为rejected
状态只能改变一次不管成功/失败都会有一个数据结果

5. Promise状态发生改变后在任何时候都可以获取结果

Promise实例的then方法获取成功结果
Promise实例的catch方法获取失败结果

6. Promise在创建实例时里面代码会立即执行

Promise自己是同步的只有then方法才是异步的

04. Promise使用链式语法解决回调地狱

1. 创建Promise实例

let p = new Promise((resolve, reject) => {
    // 创建xhr对象
    let xhr = new XMLHttpRequest()
    // 设置请求方式和url
    xhr.open('get', 'http://123.57.109.30:3999/api/categoryfirst')
    // 发送ajax请求
    xhr.send()
    // 注册响应事件函数
    xhr.onload = function () {
        console.log('一级')
        let res = JSON.parse(xhr.response)
    // 1.1 Promise成功状态
        resolve(res)
    }
})

2. 取出Promise实例对象结果

p.then(res => {
    console.log(res)
})

3. 取出Promise实例对象的函数结果

p1.then(res => {
    console.log(res)
})
p2.then(res => {
    console.log(res)
})
p3.then(res => {
    console.log(res)
})

4.1 三个实例对象只有url不一样可封装成函数帮我们创建Promise实例对象

function fn(url) {
    return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    // 2.1 url是形参 调用时写入实参
    xhr.open('get', url) 
    xhr.send()
    xhr.onload = function () {
        let res = JSON.parse(xhr.response)
    // 2.2 Promise成功状态
        resolve(res)
    }
})
}

4.2 调用封装好的Promise实例对象函数

let p1 = fn('http://123.57.109.30:3999/api/categoryfirst')
let p2 = fn('http://123.57.109.30:3999/api/categorySecond?firstId=622')
let p3 = fn('http://123.57.109.30:3999/api/categoryThird?secondId=621')

4.3 但打印结果还是随机的因为只要创建代码就会立即执行

p1进行完后 return 返回p2的实例对象 .then可换行

p1.then(res => {
    console.log(res)
    return p2
})
.then(res => { 
// p2的then
    console.log(res)
    return p3
})
.then(res => {
// p3的then
    console.log(res)
})

5. Promise是如何解决回调地狱的呢?

Promise通过链式调用解决回调地狱
链式调用: 在上一个then里返回下一个Promise实例就可以继续后面的then

05. Promise的all/race方法/语法

1. Promise的all方法 Promise.all

把多个Promise实例合并为一个新的Promise 结果为数组
所有Promise要全部成功才会执行then 只要有一个失败就会执行catch
then的结果为数组
finally 不管成功失败都执行

function fn(url) {
    return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.open('get', url)
    xhr.send()
    xhr.onloadend = function () {
        let res = JSON.parse(xhr.response)
        console.log(res)
        resolve(res) // 成功状态
        
    }
    })
}
let p1 = fn('http://123.57.109.30:3999/api/categoryfirst')
let p2 = fn('http://123.57.109.30:3999/api/categorySecond?firstId=621')
let p3 = fn('http://123.57.109.30:3999/api/categoryThird?secondId=622')

let p = Promise.all([p1, p2, p3])
// 所有Promise要全部成功 才会执行then 只要有一个失败就会执行catch
p.then(res => {
// then的结果为数组
    console.log(res)
}).catch(error => {
    console.log(error)
}).finally(() => {
// finally 不管成功失败都执行
    console.log('我是finally 我完事了')
})

2. Promise的race方法 Promise.race

所有Promise谁最先成功就会执行then 如果有失败就执行catch
这里res不是数组谁最先成功就是谁
then的结果为最快的那个Promise

let pp = Promise.race([p1, p2, p3])
pp.then(res => {
    console.log(res, 'race方法')
}).catch(error => {
    console.log(error)
})

06. async/await异步函数

async异步函数 async/await 主要帮我们执行Promise
async作用: 修饰函数让函数内部使用await
await作用: 取代then 并获取then结果
await 只能用于被async修饰的函数否则报错加上async变为异步函数

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 300)
})
// Promise实例对象的then方法
p.then(res => {
    console.log(res)
})

await语法:

async function fn() {
// let res = await Promise对象
    let res = await p
    console.log(res)
}
fn()
// await箭头函数语法
let fn1 = async () => {
    let res = await p
    console.log(res)
// 2.2 let res = await 后面的代码
// 如果p是Promise对象 就正常执行Promise
    Promise((res, rej) => {
// 如果p不是Promise对象 就会把代码包在Promise里面
    }).then(res => {
// 后面的代码在then里
    })
}
fn1()

6.1 使用async/await解决回调地狱练习

// 1. 封装Promise实例对象函数
function fn(url) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.send()
        xhr.onloadend = function () {
            let res = JSON.parse(xhr.response)
            resolve(res)
        }
    })
}
// 2. 创建Promise实例
let p1 = fn('http://123.57.109.30:3999/api/categoryfirst')
let p2 = fn('http://123.57.109.30:3999/api/categorySecond?firstId=621')
let p3 = fn('http://123.57.109.30:3999/api/categoryThird?secondId=622')
// 3. Promise通过链式调用解决回调地狱
p1.then(res => {
    console.log(res)
    return p2
}).then(res => {
    console.log(res)
    return p3
}).then(res => {
    console.log(res)
})

// 01. 使用async/await解决回调地狱
// 1.1 await右边的代码就是Promise内部的代码 .then
async function fn1() {
    let res1 = await p1
    console.log('一级', res1)
    let res2 = await p2
    console.log('二级', res2)
    let res3 = await p3
    console.log('三级', res3)
// 1.2 分析: await下面的代码全都是then里的代码
    // p1.then(res1 => {
    //     console.log(res1)
    // p2.then(res2 => {
    //     console.log(res2)
    // p3.then(res3 => {
    //     console.log(res3)
    // })
    // })
    // })
}
fn1()

07. 了解axios底层原理/手写Promise封装xhr

7.1 以前使用的axios

axios.get('http://123.57.109.30:3999/api/categoryfirst').then(res => {
    console.log(res.data)
})

7.2 axios底层原理

axios其实就是把xhr对象包装在Promise里面
axios方法本质是返回一个Promise对象
Promise内部是原生xhr发送ajax请求
请求成功则用resolve返回给Promise对象结果给外面的then

let p = axios.get('http://123.57.109.30:3999/api/categoryfirst')
console.log(p)
p.then(res => {
    console.log(res.data)
})

7.3 手写Promise源码封装xhr

let fn = {
// 2.1 封装一个get函数
    get(url) {
// 2.2 创建Promise实例对象
        return new Promise((resolve, reject) => {
// 2.3 这里的代码是原生xhr对象
            let xhr = new XMLHttpRequest()
            xhr.open('get', url)
            xhr.send()
            xhr.addEventListener('loadend', function () {
                let res = JSON.parse(xhr.response)
                resolve(res)
            })
        })
    }
}
// 2.4 调用get方法 会返回Promise对象
let p1 = fn.get('http://hmajax.itheima.net/api/news') 
console.log(p1)
// 2.5 取出Promise实例对象结果
p1.then(res => {
    console.log(res)
})
// 2.6 简写语法
fn.get('http://hmajax.itheima.net/api/news').then(res => {
    console.log(res)
})
// 2.7 使用async/await简写
async function fn1() {
    let res = await fn.get('http://hmajax.itheima.net/api/news')
    console.log(res)
}
fn1()

7.4 使用axios异步函数依次加载-async/await

使用async/await 依次加载一二三级的列表

// 1. 声明async异步函数
async function fn() {
    let res1 = await axios.get('http://123.57.109.30:3999/api/categoryfirst')
    console.log(res1.data)
// 2. await调用Promise 会取代Promise的then
// 3. 只要是await后面的代码都在then方法里
    let res2 = await axios.get('http://123.57.109.30:3999/api/categorySecond?firstId=621')
    console.log(res2.data)
    let res3 = await axios.get('http://123.57.109.30:3999/api/categoryThird?secondId=622')
    console.log(res3.data)
}
fn()

08. try-catch捕获异常

Error对象: 内置对象提示错误代码信息
throw错误信息: 抛出异常让控制台变红
try-catch语法: 捕捉错误代码

8.1 try-throw语法

try {
// 这里代码如果遇到错误 就会执行catch
    console.log(1)
// 在try里写throw就会执行catch
    throw '错误信息'
} catch (error) {
    console.log(error)
} finally {
    console.log(666)
}

8.2 应用场景

8.3 用于结束forEach(面试题)

throw主动抛出错误就会结束try代码然后立即执行catch

try {
    let arr = [10,20,30,40,50]
    arr.forEach(i => {
        if (i == 30) {
// throw主动抛出错误 就会结束try代码 然后立即执行catch 
            throw 2
        }
        console.log(i)
    })
} catch (error) {
    console.log(error)
}

8.4 捕捉await的错误信息

错误的Promise走catch 但await走不了catch 只能then
所以使用try-catch方法配合捕捉await错误

async function fn() {
    try {
// 错误的Promise走catch 但await走不了catch 只能then
// 所以使用try-catch方法 配合捕捉await错误
        let res = await axios.get('http://1hmajax.itheima.net/api/news')
        console.log(res.data)
    } catch (error) {
        console.log(error)
    }
}
fn()