promise .then和async await的使用

农夫三拳有点疼=-=

已于 2022-03-15 18:12:03 修改

阅读量6.9k

点赞数 1

文章标签：前端

于 2022-03-01 18:52:02 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/123212948

版权

promise .then

执行流程：

Promise第一层的resolve（）里面的数值是第一个.then的的第一个方法的参数，然后第一个then的return的返回值是第二个.then返回值的参数

Promise的优势
                   1. 指定回调函数的方式更加灵活
                       旧的: 必须在启动异步任务前指定
                       Promise: 启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后)

                   2. 支持链式调用, 可以解决回调地狱问题
                       什么是回调地狱?
                           回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数的执行条件
                       回调函数的缺点：
                           不便于阅读/不便于异常处理

                       解决方案
                           promise的链式调用
                       终极解决方案
                           async/await

创建promise对象(pending状态),指定执行器函数
			new Promise((resolve,reject)=>{
				console.log(123);
				//2.2 在执行器函数中启动异步任务
				setTimeout(()=>{
					const time = Date.now();
					//2.3 根据结果做不同处理
					if(time%2===1)resolve("是奇数"+time)
					else reject("是偶数"+time)
				})
			}).then(
				//2.4 给promise指定成功或失败的回调函数来获取成功的value或失败的reason
				value => console.log("状态为resolved"+value),
				reason => console.log("状态为rejected"+reason)
			)
			console.log(456);

Promise的常用API

1.Promise的构造函数: Promise (excutor){}
               excutor函数: 同步执行(resolve, reject)=>{}
               resolve函数: 内部定义成功时我们调用的函数 value=>{}
               reject函数: 内部定义失败时我们调用的函数 reason=>{}
               说明: excutor会在Promise内部立即同步回调, 异步操作在执行器中执行

           2.Promise.prototype.then方法:(onResolved, onRejected)=>{}
               onResolved函数: 成功的回调函数 (value)=>{}
               onRejected函数: 失败的回调函数 (reason)=>{}
               说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败对调
                       返回一个新的promise实例对象
           3.Promise.prototype.catch方法: (onRejected)=>{}
               onRejected函数: 失败的回调函数 (reason)=>{}
               说明: then()的语法糖, 相当于:then(undefined,onRejected)
           4.Promise.resolve方法: (value)=>{}
               value: 成功的数据或promise对象
               说明: 返回一个成功的promise对象
           5.Promise.reject方法 (reason)=>{}
               reason: 失败的原因
               说明: 返回一个失败的promise对象
           6. Promise.all 方法: (promises)=>{}
               promises: 包含n个promise数组
               说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败
           7. Promise.race方法: (promises)=>{}
               promises: 包含n个promise数组
               说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态

如：
let p = new Promise((resolve,reject)=>{
				// throw 789
				setTimeout(()=>{
					// resolve(123)
					// reject(456)
					// 如果在异步任务里抛出异常, 无法改变状态, 在执行器里抛出异常会把状态变成失败
					// throw 789
					resolve(123)
				},1000)
			})
			p.then(
                成功的第一个resolve的值里面的123
				value=>console.log("成功的函数调用了1",value),
                失败的第一个reject的值里面的
				reason=>console.log("失败的函数调用了1",reason)
			)
			p.then(
				value=>console.log("成功的函数调用了2",value),
				reason=>console.log("失败的函数调用了2",reason)
			)
			p.then(
				value=>console.log("成功的函数调用了3",value),
				reason=>console.log("失败的函数调用了3",reason)
			)
//.then里面用了es6语法，全写是function（value）{console.log("成功的函数调用了1",value)}

这里注意，第一个方法返回的值要在第一个.then的第一个成功的回调函数里进行操作；失败的话要在.then的第二个回调函数中操作

二：async和await

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

执行流程：

async是一个是函数异步执行的函数方法

await 右侧是表达式，也是需要等待后面执行结束之后的在执行下一步的表达式，

如果有赋值 let a = await this.$http({}),后者不用.then，赋值给a相当于将成功请求的值赋值给了a使用

methods: {
      getHot (){
        setTimeout(() => {
          console.log(1);
          return 1
        }, 1000);
      },
      async axios1() {
        // 返回这个函数，用于后面.then进行调用
       return await this.$http({
          url: "https://elm.cangdu.org/xxxxxxx",
          method: "get",
          data: {},
        }).then((res) => {
          console.log(res.data.name);
          //返回请求的返回值
          return res.data;
        });
      }
    // },
  },
  created() {
    //调用这个异步函数，等待成功后获取值在新的.then中继续调用
    this.axios1().then((res)=>{
      console.log(res);
    })
  },

async 是"异步"的简写 await就是 async wait的简写

               1. async函数
                   函数返回值是Promise实例对象
                   promise对象的结果由async函数执行的返回值决定
                   也是new promise（）{}的简写，直接写成 async函数

               2.await表达式
                   await右侧的表达式一般是promise对象, 但也可以是其他的值
                   如果表达式是promise对象, await返回的是promise成功的值
                   如果表达式是其他的值, 直接作为await的返回值

               3.注意
                   await必须写在async函数中, 但async函数中可以没有await
                   await只等待成功的值, 如果await的promise失败了, 就会抛出异常, 需要通过try...catch捕捉处理



               async起什么作用?
               函数返回值是Promise实例对象
               Promise不需要等待如果async里没有await,会立即执行,不会阻塞后面的语句,和普通的函数并无二致


               await到底在等啥?
               只等待一个成功的值,如果等到的是个表达式,他会把表达式计算成promise对象

               await等到之后了然后干嘛?
               如果await等到的不是一个promise对象, 那await表达式的运算结果就是它等到的东西
               如果await等到的是一个promise对象, 那await就忙起来了, 就会把后面的代码阻塞, 等待promise对象resolve, 然后等到resolve的值, 作为await表达式的运算结果



               async和await的优势在哪?
               单一的promise链并不能发现async和await的优势, 但是如果需要处理多个promise组成的then链的时候, 优势就体现出来了

function demo1(){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>{
						resolve("成功了")
					},2000)
				})
			}
async function demo2(){
				// let result = await demo1()//await只等成功的值
				// console.log(result);
				// let result = demo1().then(
				// 	value => console.log(value)
				// )
				
				
				try{
					let result1 = await demo1()//await只等成功的值
					/* let result2 = await demo2()
					let result3 = await demo3()
					let result4 = await demo4()
					let result5 = await demo5()
					let result6 = await demo6()
					let result7 = await demo7()
					let result8 = await demo8() */
					console.log("我拿到结果了",result1);
				}catch(err){
					console.log(err);
				}

catch拿到的是promise里面的reject的结果，如果要是没有用reject的结果，就要用catch来监督
注意，这里的try是和catch共同使用，缺一不可，try里面写的是返回的值，然后返回的是如果是正确的就走await的方法，不走catch；如果报错就要走catch，不走await