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

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

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

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

1.3 层层嵌套:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 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实例

1
2
3
4
5
6
7
8
// (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)是实参
1
2
3
4
5
6
7
// 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对象有三种状态:

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

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

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

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

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

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

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

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

1. 创建Promise实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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实例对象结果

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

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

1
2
3
4
5
6
7
8
9
p1.then(res => {
    console.log(res)
})
p2.then(res => {
    console.log(res)
})
p3.then(res => {
    console.log(res)
})

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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实例对象函数

1
2
3
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可换行
1
2
3
4
5
6
7
8
9
10
11
12
13
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是如何解决回调地狱的呢?

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

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

1. Promise的all方法 Promise.all

  1. 把多个Promise实例合并为一个新的Promise 结果为数组
  2. 所有Promise要全部成功 才会执行then 只要有一个失败就会执行catch
  3. then的结果为数组
  4. finally 不管成功失败都执行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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')
1
2
3
4
5
6
7
8
9
10
11
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

  1. 所有Promise谁最先成功 就会执行then 如果有失败就执行catch
  2. 这里res不是数组 谁最先成功就是谁
  3. then的结果为最快的那个Promise
1
2
3
4
5
6
let pp = Promise.race([p1, p2, p3])
pp.then(res => {
    console.log(res, 'race方法')
}).catch(error => {
    console.log(error)
})

06. async/await异步函数

  1. async异步函数 async/await 主要帮我们执行Promise
  2. async作用: 修饰函数 让函数内部使用await
  3. await作用: 取代then 并获取then结果
  4. await 只能用于被async修饰的函数 否则报错 加上async变为异步函数
1
2
3
4
5
6
7
8
9
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1)
    }, 300)
})
// Promise实例对象的then方法
p.then(res => {
    console.log(res)
})

await语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 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

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

7.2 axios底层原理

  1. axios其实就是把xhr对象包装在Promise里面
  2. axios方法本质是返回一个Promise对象
  3. Promise内部是原生xhr发送ajax请求
  4. 请求成功则用resolve返回给Promise对象 结果给外面的then
1
2
3
4
5
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
2
3
4
5
6
7
8
9
10
11
12
// 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捕获异常

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

8.1 try-throw语法

1
2
3
4
5
6
7
8
9
10
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
1
2
3
4
5
6
7
8
9
10
11
12
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的错误信息

  1. 错误的Promise走catch 但await走不了catch 只能then
  2. 所以使用try-catch方法 配合捕捉await错误
1
2
3
4
5
6
7
8
9
10
11
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()