New Promise() 基础

news2025/2/26 7:28:57

阅读目录

  • console.dir(Promise) 打印
    • resolve 做用
    • reject 的用法
    • catch 的用法
    • all 方法的用法

console.dir(Promise) 打印

在这里插入图片描述
Promise 是一个构造函数,本身身上有 all、reject、resolve 这几个方法,原型上有 then、catch 等方法。

所以 Promise new 出来的对象确定就有 then、catch 方法。

Promise 的构造函数接收一个参数,是函数,而且传入两个参数:resolve,reject,分别表示异步操做执行成功后的回调函数和异步操做执行失败后的回调函数。

resolve 做用

function a(){
    var b= new Promise(function(resolve, reject){
        //异步操做
        setTimeout(function(){
            console.log('完成');
            resolve('输出的东西');
        }, 2000);
    });
    return b;            
}
a().then(function(data){
    console.log(data);
    //后面能够用传过来的数据作些其余操做
    //在a()的返回上直接调用then方法,then接收一个参数,是函数,而且会拿到咱们在a中调用resolve时传的的参数。运行这段代码,会在2秒后输出“完成”,紧接着输出“输出的东西”。
});

注意点:

用 Promise 的时候通常是包在一个函数中,在须要的时候去运行这个函数再用异步的方法函数在 then 方法中,你也能够直接 return 数据而不是 Promise 对象,在后面的 then 中就能够接收到数据。

优点:Promise 的优点在于,能够在 then 方法中继续写 Promise 对象并返回,而后继续调用 then 来进行回调操做。

reject 的用法

then方法能够接受两个参数,第一个对应 resolve 的回调,第二个对应 reject 的回调。
因此咱们可以分别拿到他们传过来的数据。

catch 的用法

和 then 的第二个参数同样,用来指定 reject 的回调。
即使是有错误的代码也不会报错,与 try/catch 语句有相同的功能。

all 方法的用法

Promise 的 all 方法提供了并行执行异步操做的能力,而且在全部异步操做执行完后才执行回调。

all 会把全部异步操做的结果放进一个数组中传给 then ,能够并行执行多个异步操做,而且在一个回调中处理全部的返回数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405393.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

VUE使用Three.js实现模型,点击交互,相机旋转视角跟随移动(Threejs中使用Tweenjs,含demo源码)

目录 一、Three.js是什么? 二、VUE简单使用Three.js步骤 1.npm安装 2.template模板 3.引入库 4.定义全局变量 5.初始化场景 6.初始化相机 7.初始化灯光 8.初始化渲染器 9.创建模型(这里我搭建的模型是一个简单双面货架模型) 10.根据浏览器窗口自适应 11…

Vue3中slot插槽使用方式

一文搞懂Vue3中slot插槽的使用! 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件…

axios无法加载响应数据:no data found for resource with given identifier

美好的、令人遐想的日落黄昏里,出现了诡异的bug! 老师上课的时候,不好好听听,不仔细看!那么花了那么多时间找bug问题~翻了好多方案,还未解决,然后遇到了我,这个大冤种就是你&#xf…

EasyExcel解析动态表头及导出

前言 excel文件导入及导出,是日常开发中经常遇到的需求。本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程。 参考地址 https://github.com/alibaba/easyexcel 前端下载 const download …

JavaScript判断对象是否为空对象的几种方法

目录 1、空对象对应的字符串为 "{}" 2、for in 3、jquery 的 isEmptyObject()方法 4、Object.getOwnPropertyNames() 5、ES6 的 Object.keys() JSON.stringify()扩展 1、第一大特性 小结 2、第二大特性 3、第三大特性 4、第四大特性 5、第五大特性 6、第…

Vue实战——使用代理服务器解决跨域问题——No‘Access-Control-Allow-Origin‘ header is present on the requested resource

概论: 目录 一、跨域问题是怎么产生的 1.1 跨域问题: 1.2 解决办法 三、开启代理服务器 第一种方式:(存在弊端) 细节问题:(解释两个弊端) 第二种方式:&#xff08…

el-input设置必填提示(单个多个)

有两种:一种是多个el-input通过同一个el-form表单来限制,这种用得最多的地方就是添加和修改功能;另一种是每个el-input通过各自的el-form表单来限制,这种通常是用在动态添加多个输入框等功能上,话不多说,上才艺噻. 第一种(多个el-input同时限…

【JavaScript】JS实用案例分享:DOM节点转JSON数据 | 标签输入框

🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路(源创征文一等奖作品):前端之行,任重道远(来自大三学长的万字自述) 🖥️ TypeScript知识总结&…

微信小程序--》tabBar底部栏

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

搭建博客,基于vue3 的 vitepress 轻松搞定

Ⅰ、什么是vitepress 💎 vitepress 使用场景 简单的说 ,只要 会用 markdown 语法,就能构建自己的 「博客、笔记、使用文档」等系统 ; ✨ vitepress 优势 优势介绍傻瓜式操作只需要配置 菜单 和 对应的 markdown 就能实现博客、笔…

【Vue脚手架安装教程】

文章目录前言一、安装Node.js二、配置淘宝镜像安装cnpm,将npm设置为淘宝镜像:二、安装vue/cli检查是否安装成功: vue -V 或者 vue --version ![在这里插入图片描述](https://img-blog.csdnimg.cn/7f66366eba81456388fcf28871db0650.png)三、 创建一个vue…

Chrome浏览器的跨域设置

做前后端分离的开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,而且chrome浏览器支持可跨域的设置,但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了。其实网上也有很多大神总结的chrome跨域设…

webpack的面试题(吐血整理)

以下为整理的webpack面试题,如有不足之处,还请大家多多指正。 一、webpack的构建流程 二、对webpack的理解 webpack是一个打包模块化js的工具,在webpack里一切文件皆模块,通过loader转换文件,通过plugin注入钩子&#…

最常见的六种跨域解决方案

目录: 前言:什么是跨域?JSONPCORS搭建Node代理服务器Nginx反向代理postMessageWebsocket总结 前言:什么是跨域? 跨域就是当在页面上发送ajax请求时,由于浏览器同源策略的限制,要求当前页面和…

jQuery模态弹窗插件(jquery-confirm)

前言 今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件:jquery-confirm,它包含Bootstrap,Material等多种主题供选择。 如果你的前端项目中还在使用jQuery,那么jquery-confirm是你模态弹窗的完美选择。 下面我们就来零距离感受…

IDEA如何运行SpringBoot项目(超详细截图)

【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行! 博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、…

vue中组件的props属性(详)

今天这篇文章,让你彻底学会props属性…… props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项。 问题一:那props具体是怎么使用呢?原理又是什么呢?往下看…

css绘制3D炫动ikun

今天做一个3D版的ikun。 先准备图片一张 代码浅析 页面整体div.contrainer,舞台div.stage,控制盒子div.control,图片盒子div.imgWrap,js载入div.img列表。 <div class"contrainer"><div class"stage"><div class"control">…

vue项目引入svg图标(完整步骤)

1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖。 npm安装&#xff1a;npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹&#xff0c;在icons文件夹下创建svg文件夹存放本地svg图标。 3. vue.config.js 中配置svg图片 vue.c…

vue中使用echarts实现动态数据绑定、获取后端接口数据

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图&#xff0c;在项目中我们肯定是需要获取后端接口&#xff0c;将后端返回的数据显示在图表上&#xff0c;所以这次就记录一下如何实现echarts的动态数据绑定。 简单来讲&#xff0c;就是从接口获取到的数据&a…