快速了解Promise对象

目录

一.Promise的基本了解

二.Promise三种状态与另外处理方式

三.Promise的链式调用以及其简写

四.Promise的all方法 和 race方法

五.Promise.resolve() 与 Promise.reject()

六.关键问题

七.async函数 和 await表达式

---

一.Promise的基本了解

1.promise的理解

• 是异步操作的一种解决方案,一般是网络请求之类的异步操作

• 网络请求很复杂的时候,会出现回调地狱，可以解决回调地狱问题

2.promise的使用

• new Promise() ---> 参数是一个function函数 -----> function函数有两个参数 resolve,reject ----> resolve,reject也是函数形式

• new 的时候 1.保存了一些状态信息, 2.执行传入的函数

• then() 参数也是一个函数,存放处理结果的代码 网络请求和处理分开 代码更加优雅

• 链式编程

3.then 与 catch

• then参数只有一个处理成功的代码

• catch捕获失败的代码

• then参数有两个,第一个处理成功的执行 第二个处理失败的执行

二.Promise三种状态与另外处理方式

1.三种状态以及流程

• 异步操作 ——> 被包在promise对象里面 ——> 执行异步操作 ——> 判断状态：pending fullfilled rejected ——> 状态为成功就调 resolve 失败就调reject

• Promise是一个对象,它有两个属性,一个是 State,一个是value

2.另外处理方式

• then可以传入两个参数

三.Promise的链式调用以及其简写

1.简写

new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve('aaa')
            },1000)
        }).then(res => {
            console.log(res,'第一次处理的结果');
            // return new Promise((resolve) => {
            //     resolve(res+'bbb')
            // })
           1. // 简写
             return Promise.resolve(res+'111')
           2. // 再简写 (内部会进行promise包装)
            return res+'111'
        }).then(res => {
            console.log(res,'第二次打印的结果');
           1.// 简写
            // return Promise.reject(res+'ccc'+'error')
           2.// 再简写
            throw('wrong')
        }).then((res) => {
            console.log(res,'第三次打印的结果');
        }).catch((err) => {
            console.log(err);
        })
​
​

四.Promise的all方法 和 race方法

1. all方法

Promise.all([
    new Promise((resolve) => {
        setTimeout(() => {
            resolve('{name:"yucuiwen",age:19}')
        },1000)
    }),
    new Promise((resolve) => {
        setTimeout(() => {
            resolve('ooooooo')
        },2000)
    })
]).then((res) => {
    console.log(res);
})

• Promise.all() 方法参数是一个数组，返回的状态只有所有的promise对象都成功才是成功的状态，

  如果有一个不成功，那么就是失败的状态，返回的promise对象的value值就是失败的那一个

• 如果全部成功，用then()方法可以获得成功的所有值（数组形式）就是说then((data) => {console.log(data)}) data里面存放的是这个数组

• 如果全部成功，then()也是成功状态,但是value:undefined

• 如果是失败的话,那么then()方法获取不到任何值，就是说then((data) => {console.log(data)}) data里面没有任何返回值

• 如果是失败的话，then()也是失败状态，返回的then() (promise对象)的value值就是失败的那一个

2.race方法

• 监视的是最先改变状态的那一个

五.Promise.resolve() 与 Promise.reject()

1. 本质

• 它们不是实例对象，而是函数对象

• 实际上是一种简写

  new Promise((resolve,reject) => {
      ......
      resolve(data)
  })
  //简写成：
  Promise.resolve(data)  

2.用法

• Promise.resolve(),

  传递的是一个非Promise对象,那么返回的是成功的状态,Value就是传入的值

• Promise.resolve(),

  传递的是一个Promise对象,那么根据Promise对象自身的状态来决定resolve()的结果

• Promise.reject()

  无论传入什么值,返回的结果都是失败的

六.关键问题

1.状态改变

• 使用resolve() reject() throw 内部都会改变状态

• 异步任务都是先指令函数，然后改变状态，然后回调函数

• 只要状态改变,就可以调用对应的一个或者多个回调函数

• 异步任务中如何先改变状态再回调?

  • 在执行器中直接调用resolve()/reject()

  • 延长【更长】时间才调用then()

2.中断promise链

• 有且只有一种情况，状态不变 then((val) => return new Promise(() => {}) ) 状态不变 还是Pending

  此时就不会改变 promise链就会被中断

七.async函数 和 await表达式

1.async函数

• 形式是: async function 函数名

• return返回的是一个promise对象 返回的value与state规则基本与then()一致

2.await函数

• 形式是： await p(promise对象)

• 捕获的是成功的promise的value值

• 失败的promise的value值,需要用 try ... catch...捕获

  try {
                      let res3 = await p
                  } catch(e) {
                      console.log(e);
                  }

3.结合

 // 返回的是一个promise对象的数据
         

 function sendAjax(url) {
            return new Promise((resolve,reject) => {
                const xhr = new XMLHttpRequest;
                xhr.open('GET',url);
                xhr.send();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            resolve(xhr.response)
                        } else {
                            reject(xhr.status)
                        }
                    }
                }
            })
        }
​
        const btn = document.querySelector('button')
        btn.addEventListener('click',async function(){
           const duanzi =  await sendAjax('https://api.apiopen.top/getJoke')
           console.log(duanzi);
        })