Promise的基本用法

目录

一、概念

二、特点 

三、缺点

四、基本使用

1.promise封装定时器 

2.promise封装Ajax

五、async和await用法

1.当函数返回的是一个非promise对象

2.当函数返回的是一个promise对象 

一、概念

Promise是异步编程的一种解决方案，主要用来解决地狱回调的问题，可以有效的减少回调嵌套。通俗讲，Promise是一个许诺、承诺。是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。

• pending正在做……
• resolved完成这个承诺
• rejected这个承诺没有完成，失败了

 真正解决需要配合async/await。

二、特点 

1. 对象的状态不受外界影响，只有异步操作的结果可以决定对象的状态，任何其他操作都无法改变这个状态。
2. 状态一但确定将无法改变。哪怕再对Promise对象添加回调函数，也会立即得到这个结果。 

三、缺点

1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消。和一般的对象不一样，无需调用。 
2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
3. 当处于Pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

四、基本使用

1.promise封装定时器 

 <script >
        function doDelay(time) {
          // 1. 创建 promise 对象(pending 状态), 指定执行器函数
          return new Promise((resolve, reject) => {
            // 2. 在执行器函数中启动异步任务
            console.log('启动异步任务')
            setTimeout(() => {
              console.log('延迟任务开始执行...')
              const time = Date.now() // 假设: 时间为奇数代表成功, 为偶数代表失败
              if (time % 2 === 1) { // 成功了
                // 3. 1. 如果成功了, 调用 resolve()并传入成功的 value
                resolve('成功的数据 ' + time)
              } else { // 失败了
                // 3.2. 如果失败了, 调用 reject()并传入失败的 reason
                reject('失败的数据 ' + time)
              }
            }, time)
          })
        }
      const promise = doDelay(2000)
      promise.then(// promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
          value => {// 成功的回调函数 onResolved, 得到成功的 vlaue
            console.log('成功的 value: ', value)
          },
          reason => { // 失败的回调函数 onRejected, 得到失败的 reason
            console.log('失败的 reason: ', reason)
          },
        )
 </script>

2.promise封装Ajax

 <script>
        function sendAjax(url){
            return new Promise((resolve,reject)=>{
                const xhr = new XMLHttpRequest();
                xhr.open('GET',url);
                xhr.send();
                xhr.onreadystatechange = ()=>{
                    if(xhr.readyState == 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            const data = JSON.parse(xhr.response)
                            if(data.code == 200){
                                resolve(data.lists)
                            }else{
                                reject('失败')
                            }
                        }
                    }
                }
            })
        }

        const MyPromise =  sendAjax('http://127.0.0.1:5500/9.12%20%E7%8E%8B%E4%BB%95%E4%B8%B9/test.json')
        MyPromise.then((resolve)=>{
            console.log(resolve)
        })
    </script>

五、async和await用法

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

1.当函数返回的是一个非promise对象

    <script>
        async function myfun(){
            // 1.非promise对象
            return 'succ'
        }
        const MyPromise = myfun()
        console.log(MyPromise)
        MyPromise.then((resolve)=>{
             console.log(resolve)
        })
    </script>

我们可以看到，当我们return的是一个非promise对象时，返回的是 promise对象。

2.当函数返回的是一个promise对象 

    <script>
        async function myfun(){
            // 1.非promise对象
            // return 'succ'
            // 2.promise对象
            return  new Promise((resolve,reject)=>{
					reject("error");
			})
        }
        const MyPromise = myfun()
        console.log(MyPromise)
        MyPromise.then((resolve)=>{
            console.log(resolve)
        })
    </script>

 return的是promise对象，返回的promise对象与内部一致。

await 也是一个修饰符，只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

           async function demo(){
			  try{
				  const a =  1;
				  const b = await new Promise((resolve,reject)=>{
				      setTimeout(()=>{
				  		console.log("promise执行了...");
				  		resolve("succ");//成的值
				  	},3000)	
				  })
				  const c = 3;
				  console.log(a,b,c);
			  }catch(e){
				console.log(e);  
			  }
			}
		
			const MyPromise = demo();

async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；而 await 用于等待一个异步方法执行完成；
async/await的作用就是使异步操作以同步的方式去执行。