Promise .then .catch async await

 使用场景实例：Promise、async/await使用场景_Ahuan222的博客-CSDN博客_async await使用场景

promise  

 

Promise 

1.什么是promise

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

promise的构造函数是同步执行

promise.then中的函数是异步执行

Promise类的实例对象是有**状态(state)**的，对应三个值：pending(待定)、fullfilled(成功)、rejected(失败)

(实例的初始状态为pending，一旦由pending状态落定成fulfilled状态或rejected状态，就不可再次改变，该过程是不可逆的）

与之对应，Promise类实例对象有成功的结果(value)和失败的原因(reason)，默认值都为undefined，只有状态被改变后(从初始默认状态落定成功或失败的状态)才会为其赋值。

注意：Promsie内部的state、value、reason是私有的，外界是访问不到的

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise=new Promise((resolve,reject)=>{
    
    //...一系列操作...
    
    //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    resolve("我是成功的结果")
})

console.log(promise)

 

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise=new Promise((resolve,reject)=>{
        
    //...一系列操作...
    
    //改变实例的状态：pedding->rejected，失败的原因reason为“我是失败的原因”
    reject("我是失败的原因")
})

console.log(promise)

正如开头说的，在我们实例化一个Promise时会传入一个执行器函数来进行一系列的操作，这个执行器函数接受两个参数：resolve、reject他们都是回调函数，用来落定状态。在这个执行器函数里面就可以根据这一系列的操作的实际情况通过这两个回调来规定该实例对象的状态是fulfilled(成功)，还是rejected(失败)，并设置成功的结果或失败的原因。
注意：如果在执行器函数内部抛出错误也会是promsie实例的状态落定成rejected

---

关于resolve回调函数的参数

• 传入普通的值或对象，Promise实例的状态直接落定成fulfilled(正如上面的示例)

• 传入一个新的Promise实例，当前的Promise实例的状态由这个新的Promise来决定，转态转移。

let promise = new Promise((resolve, reject) => {

    //...一系列操作...
	//状态转移为新的Promise
    resolve(new Promise((res, rej) => {
        rej('cuole')
    }))
})
console.log(promise)

• 传入一个对象，并且这个对象内部实现了then方法，那么会自动执行这个then方法同时会将resolve和rejected回调传到then方法中，又这个then方法来决定最终的转态

let promise = new Promise((resolve, reject) => {

    //...一系列操作...
    const obj = {
            then() {
                console.log(233)
                return 123
            }
        }
    resolve(obj)
})

let promise = new Promise((resolve, reject) => {
    //...一系列操作...
    const obj = {
        	//这里会自动将res和rej回调传递进来
            then(res, rej) {
                console.log(233)
                //最终转态落定成功，成功的结果为233
                res('233')
            }
        }
        //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    resolve(obj)
})
console.log(promise)

 上面的后两种特殊情况也可能交替出现：

let promise = new Promise((resolve, reject) => {
    //...一系列操作...
    const obj = {
            then(res, rej) {
                console.log(233)
                res('467987987416455')
            }
        }
    resolve(obj)
})
let promise2 = new Promise((res, rej) => {
    //这里执行的res参数是一个Promsie实例，并且这个实例里面执行resolve时传入的是一个实现了then方法的对象
    res(promise)
})
console.log(promise2)

---

2. Promise.prototype.then()方法

在原型上的then方法最多接收两个参数，onResolved处理程序和onRejected处理程序，都是可选的。通过这两个参数我们可以拿到实例成功或失败的结果。同时then方法也会返回一个新的Promise实例对象(下面一律称为promise2)。

then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。 

注意：只有Promsie内部的状态落定了，then方法中对应的处理程序才会执行。

//向里面传入执行器函数，执行器函数默认两个参数对应改变状态的两个函数
let promise = new Promise((resolve, reject) => {
    //改变实例的状态：pedding->fulfilled，成功的结果value为“我是成功的结果”
    reject("我是失败的原因")
})
promise.then(undefined, reason => {
    console.log(reason)
})
//打印 “我是失败的原因”

• 链式调用

上面说到then方法返回一个新的Promise实例，那么就再次可以使用then方法，不断地.then().then()，以此类推：new Promsie((res,rej)=>(res(‘bar’))).then().then().then() … ,这就是then方法的强大之处，可以链式调用
 

3.Promise.prototype.catch()方法

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

Promise、then()、catch()详解_Mr-programming的博客-CSDN博客_promise的then和catch

async函数、await函数

async函数、await函数、promise、then四者的关系_一生注定学霸命的博客-CSDN博客_async await then

https://www.jianshu.com/p/b4fd76c61dc9

1. async await函数基础使用

async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法 ，async函数的返回值是Promise对象，可以用then方法指定下一步的操作

2. 特点

• 函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。
• await后面接一个会return new promise的函数并执行它
• await只能放在async函数里

 案例

function 摇色子(){
    return new Promise((resolve, reject)=>{
        let sino = parseInt(Math.random() * 6 +1)
        setTimeout(()=>{
            resolve(sino)
        },3000)
    })
}
async function test(){
    let n =await 摇色子()
    console.log(n)
}
test();

• 上面这段代码async中使await 摇色子()先执行
• 等到三秒后执行完再把得到的结果赋值给左边的n
• 也就是说test函数需要三秒钟才执行完成
• 所以test函数是异步的，因此前面必须写async

3.为什么要用await

• 为了使我们的异步代码，更像同步的代码

二、async函数的返回值

• async函数其实是Geneator函数的语法糖。
• then+下一步操作

1. async函数的返回值是Promise对象可以用then方法指定下一步的操作。
2. async函数可以看做多个异步操作，包装成一个Promise对象
3. await命令就是内部then命令的语法糖。

• then+回调函数

1. async函数返回一个Promise对象
2. 可以使用then方法添加回调函数。
3. 当函数执行的时候，一旦遇到await就会先返回
4. 等到异步操作完成，再接着执行函数体后面的语句。
5. async函数内部return语句返回的值，会成为then方法回调函数的参数

async function f(){
return 'hello world';
}
f().then(v=>console.log(v))
// "hello world;"