当前位置: 首页 > news >正文

VUE Promise基础语法

目录

异步和同步

异步的问题

new Promise语法

promise的状态

promise.then()

Promise.resolve()

Promise.reject()

Promise.all()

Promise.race()

Promise.catch()

Promise.finally()


异步和同步

同步模式下,代码按顺序执行,前一条执行完毕后,进行后一条的执行。

异步模式下,代码可以不按顺序执行,不同行的代码可以同时执行。

异步的问题

有时,一条代码需要一个异步操作的返回值才能进行计算,这就会导致回调问题,promise语法可以优雅地解决回调。

new Promise语法

new Promise用于创建Promise实例,其参数是一个函数。

const demo = new Promise( ( resolve, reject )=>{if(){...resolve();    }if(){...reject();}}
)

作为参数的函数接收两个参数。为resolve和reject(参数名可以修改,但一般都用resolve和reject),resolve和reject也为函数。

promise的状态

promise实例具有三个状态:成功(fulfilled,但有时也叫resolved)、失败、待定。

当调用resolve()函数时,promise的状态会变成成功。

当调用reject()函数时,promise的状态会变为失败。

当promise的状态为成功或失败时,会进入Promise.then()。

在new Promise中,若调用throw,会触发reject状态。

        let a = new Promise((resolve,reject)=>{throw Error('error!');});console.log(a);

promise.then()

接收两个参数,第一个参数是promise状态变为成功时,执行的函数,第二个参数是promise状态为失败时调用的函数。

demo.then(()=>{//如果resolve被触发,执行的函数},()=>{//如果reject被触发,执行的函数}
)

传参

在new Promise参数函数中,reject和resolve可以传递参数,在.then对应的处理函数中,可以获得这个参数,且两个参数的名称不需要对应。

    const demo = new Promise( ( resolve, reject )=>{if(){...resolve(num1);    }if(){...reject(num2);}}).then((resolveData)=>{...},(rejectData)=>{})

.then中的参数名resolveData和rejectData是可以修改的,这里只是随便起的名字,不是一定要叫这个。

Promise.resolve()

Promise.resolve()方法返回一个Promise对象。

Promise.resolve的参数为非Promise参数时,其返回的Promise对象状态为成功,值为传入的参数。

若Promise.resolve的参数为Promise参数,其返回的Promise对象的状态与值,取决于参数Promise。

        let a = Promise.resolve(1);let b = Promise.resolve(function(){return 1+1;});let c = Promise.resolve(new Promise((resolve,reject)=>{reject();}));console.log(a);console.log(b);console.log(c);

Promise.reject()

与Promise.resolve()类似。

但与resolve不同的是,不管传入的参数如何,返回的Promise状态都是失败。

传入的参数是什么,该参数的返回值会成为返回的Promise的值。

即使传入的参数是成功的Promise对象,返回值也是失败的Promise。

        let a = Promise.reject(new Promise((resolve,reject)=>{resolve("resolve!!!");}));console.log(a);

当传入的参数是成功的Promise,这个Promise会作为失败Promise的值。但返回的Promise状态仍然是失败。

当传入的参数是失败的Promise,整个失败的Promise会作为返回的Promise的值。

        let a = Promise.reject(new Promise((resolve,reject)=>{reject("reject!!!");}));console.log(a);

Promise.all()

Promise.all()方法接收一个数组。

该数组一般情况下,其中每一个元素都是Promise。

其返回的结果也是Promise,只有当数组中所有的Promise都成功时,才返回成功,成功的结果是每个Promise对象成功结果组成的一个数组,否则返回失败,失败的结果是第一个失败的Promise的结果。

Promise全成功的情况下:

若传入的参数不是Promise,则该参数会被视为成功值。

        let p1 = Promise.resolve(1);let p2 = 2;let p3 = Promise.resolve(3);let p4 = new Promise((resolve,reject)=>{resolve('ok');});let a = Promise.all([p1,p2,p3,p4]);console.log(a);

有失败Promise的情况下:

        let p1 = Promise.resolve(1);let p2 = 2;let p3 = Promise.reject(3);let p4 = new Promise((resolve,reject)=>{resolve('ok');});let p5 = new Promise((resolve,reject)=>{reject('reject');})let a = Promise.all([p1,p2,p3,p4,p5]);console.log(a);

Promise.race()

Promise.race()方法接收一个数组。

该数组一般也都由Promise组成。返回值为第一个改变状态的Promise。

当数组元素为非Promise结构时,该非Promise结构会被视为成功的Promise并返回。

        let p1 = Promise.resolve(1);let p2 = null;let p3 = Promise.reject(3);let p4 = new Promise((resolve,reject)=>{resolve('ok');});let p5 = new Promise((resolve,reject)=>{reject('reject');})let a = Promise.race([p2,p1]);

Promise.catch()

Promise.catch()的语法有点像语法糖。

Promise.catch(reject)从语法上讲,相当于promise.then(null, reject),这里的reject都是指处理reject状态的回调函数。

.catch返回值也是一个Promise。

Promise.finally()

Promise.finally()方法,不论Promise的状态是成功还是失败,在最后都会调用finally中的方法。

finally可以用于处理不论返回结果如何,都需要执行的逻辑,可以避免代码冗余。

finally接收的是一个函数。

finally的返回值是一个新的Promise实例对象。

该对象的状态一般是父Promise状态的传递。父Promise是指promise.finally中,promise对应的实例。但当finally的返回值是显式reject或pending Promise时,返回值是reject或pending。

下例中,pTest的返回值是一个状态为失败的Promise,调用pTest时,虽然finally参数的返回值是成功的promise,但是由于该promise的状态不是失败或待定,所以finally的返回值取决于父Promise,即pTest。

        let pTest = new Promise((resolve,reject)=>{reject('error');});console.log(pTest.finally( ()=>{return new Promise((resolve,reject)=>{resolve('ok');})}));

但若finally参数返回的是reject或者pending,则返回值取决于参数。

参数返回reject的情况下:

        let pTest = new Promise((resolve,reject)=>{reject('error');});console.log(pTest.finally( ()=>{return new Promise((resolve,reject)=>{reject('reject');})}));

参数返回panding的情况下:

        let pTest = new Promise((resolve,reject)=>{reject('error');});console.log(pTest.finally( ()=>{return new Promise((resolve,reject)=>{})}));

http://www.dtcms.com/a/280149.html

相关文章:

  • 描述统计1
  • ChatTongyi × LangChain:开启多模态AI应用创新之门
  • Luban配置教程
  • 芯擎SE1000
  • 137. 只出现一次的数字 II
  • React强大且灵活hooks库——ahooks入门实践之高级类hook(advanced)详解
  • 理解 HTTP POST 请求中的 json 和 data 参数
  • 【Android】按钮的使用
  • Java 常见工作流引擎深度对比与企业选型指南
  • 大语言模型:高考志愿填报的“新纪元智能参谋”
  • MongoDB基础增删改查命令
  • 基于LAMP环境的校园论坛项目
  • SpringBoot源码解析
  • MyBatis与Spring整合优化实战指南:从配置到性能调优
  • mysql 索引失效的场景
  • HashMap深入讲解
  • 从零开始的python学习(八)P115+P116+P117+P118+P119+P120+P121+P122
  • 部署本地大模型 Ollama + LLaMA3
  • Java基础(八):封装、继承、多态与关键字this、super详解
  • GPIO 输入/输出
  • GEO革命:当AI推荐成为新战场,传统SEO如何进化?
  • Linux基础学习---目录相关命令
  • 手机当路由,连接机器人和电脑
  • Typecho插件开发:实现文章字数统计与阅读时长计算功能
  • docker 方式gost代理搭建以及代理链实施
  • Android弹窗
  • uniapp中全局引入ronMounted, ref,watch onLoad,onShow等
  • Vim多列操作指南
  • docker-compose 配置启动2个MongoDB
  • SQL 常用版本语法概览:标准演进与关键语法分析