Promise/async await(进阶版)

最新推荐文章于 2024-10-01 18:51:18 发布

执笔流年233

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量152

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_69356624/article/details/124579647

版权

1.promise是什么？

它是ES6新增的一个语法

作用: 用来 优化异步代码的写法

在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）ajax （3）nodejs中的文件读取。现在有了promise，就可以对这些异步操作进行改写了

2.promise的基本使用

let p1 = new Promise(function(resolve,reject){
     //异步操作 resolve(obj1)  或者 reject(obj2)
});
p1.then(function(rs){
    // 如果p1的状态是resolved，则then中的函数
    //会执行，且obj1的值会传给rs
}).catch(function(rs){
    // 如果p1的状态是reject，则catch中的函数
    //    会执行，且obj2的值会传给rs
}).finally(function(){
    // 一定会执行的函数
})

2.1构造器

// const obj = new Object()
// const arr = new Array()
const p1 = new Promise(function(resolve,reject){
  // 执行异步代码
  // 调用resolve,或者reject
});
console.dir(p1)

要点:

构造器必须要给定一个参数，如果不给就是会报错。例如，new Promise() 报错的信息是： Promise resolver undefined nis not a function
构造器的实参是一个函数，这个函数的特殊之处在于它有两个形参(resolve,reject)，这两个形参也是函数。在格式上，也可以采用箭头函数来改写。例如：let p1 = new Promise((resolve,reject)=>{})。
在函数体的内部，一般会执行异步代码，然后根据情况来调用resolve()或者是reject() 。调用resolve或者是reject后会产生什么样的后果，在后面小节介绍。当然了，再次强调一下resolve和reject只是形参名，可以改写成其它的。

2.2三种状态和值

一个Promise对象的状态可能是如下三种之一: pending,resolved,rejected

初始状态 pending

pending.它的意思是"待定的,将发生的",相当于是一个初始状态.创建promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态.这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态

let p = new Promise((resolve,rejectok,err)=>{ console.info('发呆.....' )})
console.dir(p)

成功状态 resolved

也有叫fulfilled的.

resolved.表示解决了.要实现从pending到resolved的转变,需要在创建Promise对象时,在函数体中调用了resolve方法(即第一个参数)

let p = new Promise((resolve,reject)=>{ resolved();})
console.dir(p)

失败状态 rejected

rejected。拒绝，失败。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数

let p = new Promise((resolve,reject)=>{ reject()} )
console.dir(p)

三种状态小结：

1.状态是可转换的

最初创建promise对象时，默认状态是pending，如果在函数体内部调用了第一个参数对应的函数，则状态变成了resolved；如果调用了第二个参数对应的函数，则状态变成了rejected。

 pending -----  resolve() --> resolved;
 pending -----  reject()  --> rejected;

2.状态转换是不可逆的

一旦从pending ----> resolved(或是rejected).就不可能再回到pending,也不能由resolved变成rejected

promise的值

一个promise对象除了状态之外,还有promiseValue.在构造器中,这个值在调用resolve和reject方法时传入

let p = new Promise( (resolve,reject) => { resolve(123); } );
//  此时，prommise对象p的状态是 resolved，值是123。
console.dir(p)

let p = new Promise( (resolve,reject) => { reject(123); } );
//  此时，prommise对象p的状态是 rejected，值是123
console.dir(p)

2.3 .then

作用: then方法的作用是为Promise对象添加状态改变时的回调函数

then的格式:

它有两个参数,每个参数都是函数,第二参数是可选的

它的两个参数都是函数

第一个参数是resolved状态的回调函数,当p的状态从pending变成了resolved,函数1会执行

第二参数是rejected状态的回调函数,当p的状态从pending变成了rejected,函数2执行

then的返回值

then()方法的返回值也是一个promise对象,但是要注意的是它的返回值是一个新的 promise对象,与调用then方法的并不是同一个对象

let p1 = new Promise(()=>{});
let p2 = p1.then(function f_ok(){}, function f_err(){}); 
// p2也是一个promise对象。

console.log(p1 === p2); // false

p2的状态及promiseValue如何确定?

如果p1的状态是pending,则p2的状态也是pending。
如果p1的状态是resolved，then()会去执行f_ok，则p2的状态由f_ok的返回值决定。

- 如果f_ok返回值不是promise对象，则p2的状态是resolved，且p2的promiseValue就是f_ok函数的return值。
- 如果f_ok返回值是一个promise对象，则p2的状态及promiseValue以这个promise对象为准。
- 如果f_ok这个函数内部发生了错误（或者是用户主动抛出错误），则p2的状态是rejected，且p2的promiseValue就是这个错误对象。

2.4 .catch

catch是 tnen(null,reject)的别名

格式及用法:

Promise.prototype.catch 是 Promise.prototype.then(null, reject)的别名，用于指定当promise对象的状态从pending变成rejected的回调函数。

var p1 = new Promise((resolve,reject)=>{
	reject('s')
});

p1.catch(function(err){
	console.log(err);
})

// 与下面的代码等价
p1.then(null, function(err){
	console.log(err);
})

catch的返回值

catch的返回值仍是一个promise对象,确定它的值方法与.then()的方式一致

2.5 使用Promise改造回调函数

基本套路

第一步:

建立模板.这里的模板是指固定的套路:写一个空函数,在函数体中创建一个Promise对象,并返回

function fnName(){
    let p = new Promise((resolve,reject)=>{  })
    return p;
}

第二步:

把异步功能写入构造器中,根据实际来决定是否调用resolve,reject

function fnName(){
    let p = new Promise((resolve,reject)=>{
        // 这里写具体的代码，并在某个恰当的时机去调用resolve和reject函数。
    })
    return p;
}

第三步:调用函数

通过 fnName( ).then().catch() 结构来调用这个函数

3.用来解决---回调地狱问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        function getData({url,success}) {
            const xhr = new XMLHttpRequest()
            xhr.open('get', url)
            xhr.onreadystatechange = function (){
                if(this.readyState === 4){
                    // 加载完成
                    const d = JSON.parse(xhr.responseText);
                    success(d)
                }
            }
            xhr.send()
        }
        getData({
            url:'http://localhost:3000/get',
            success: (data)=>{
                getData({
                    url:'http://localhost:3000/getCategory?id='+data[0].id,
                    success: data => {
                        getData({
                            url:'http://localhost:3000/getNews?id='+data[0].id,
                            success: data => {
                                console.log(data)
                        }
                    })
                }
            })
        }})
    </script>
</body>
</html>

3.1 回调地狱-用Promise来优化


        function getDataPromise(url) {
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest()
                xhr.open('get', url)
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        // 加载完成
                        const d = JSON.parse(xhr.responseText);
                        resolve(d)
                    }
                }
                xhr.send()
            })
        }
        getDataPromise('http://localhost:3000/get').then(data => {
            return getDataPromise('http://localhost:3000/getCategory?id=' + data[0].id)
        }).then(data => {
            return getDataPromise('http://localhost:3000/getNews?id=' + data[0].id)
        }).then(data => {
            console.log(data)
        })

3.2 回调地狱-用async-await语法来优化

        async function fn() {
            const res = await axios.get('http://localhost:3000/get')
            console.log('第一个请求', res);
            const res1 = await axios.get('http://localhost:3000/getCategory?id=' + res.data[0].id)
            console.log('第二个请求', res1);
            const res2 = await axios.get('http://localhost:3000/getNews?id=' + res1.data[0].id)
            console.log('第三个请求', res2);

        }

        fn()

4. async-await语法

async,await 是es7中新增的语法，用来进一步改进异步代码的写法，是promise升级版！

4.1 async

async 函数返回一个Promise对象

async 函数内部 return 语句返回的值是Promise对象的值

function f1 () {
  return 1
}
async function f2 () {
  return 1
}
async function f3 () {}
const r1 = f1()
const r2 = f2()
const r3 = f3()
console.log(r1) // 1
console.log(r2) // Promise, resolved(1)
console.log(r3) // Promise, resolved(undefined)
r2.then(res => { console.log(res) })
r3.then(res => { console.log(res) })

4.2 await命令

await的外层函数必须有一个async

正常情况下, await 命令后面是一个Promise对象,返回该promise的值,如果不是Promise对象,就直接返回对应的值

<script>
    async function f() {
        const p = new Promise((resolve,reject)=>{
            resolve(100)
        })
        const a = 1
    
        // await 等待promise的状态变化完成(pending->resolved, pending->rejected)
        // 取出promise的值
        const b = await p 

        console.log(a,b)
    }

    f()
</script>

4.3async函数内部的执行流程

在执行async函数(设名为asyncF)时，进入函数内部：

1.按序执行同步代码

2.遇到await,挑出asyncF函数

3.继续执行后续代码

4.当await后的异步代码执行完成之后,接着执行asyncF中的后续代码

const p1 = new Promise((resolve, reject) => {
  setTimeout(()=>resolve(100), 3000)
})

async function f () {
  console.log('开始执行f')
  var a = await p1
  console.log('p1完成了')
  console.log(a)
  return 1
}

console.log('主函数运行...')
const res = f()
console.log('f()完成，返回值是', res)
res.then(res => { console.log(res) })

执行结果是:

主函数运行...
开始执行f
f()完成，返回值是 Promise { <pending> }
----此处等了3s----
p1完成了
100
1

执笔流年233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫