promise是什么及其用法

news/2024/7/10 23:35:44 标签: es6, javascript, 前端

首先说一下promise是什么:

     是异步编程的一种解决方案。 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息 可以解决回调地狱(回调函数嵌套回调函数),回调函数(函数的参数是另外一个函数)

js中的异步操作有哪些?
(1)ajax请求

javascript">var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){}
xhr.addEventListener('readystatechange',function(){})

(2)浏览器事件

javascript">ele.addEventListener('click',function(){})

(3)定时器

javascript">setTime(function(){
},1000);

然后写一个案例吧

javascript">let p = new Promise(function(resolve,reject){
	//里面通常写异步操作
	setTimeout(function(){
		resolve(‘哈哈’);  //相当于调用函数
	},2000)
		
})
使用then方法配合使用
p.then(function(data){  //相当于声明函数
	状态成功时执行的函数
	console.log(data)   //2秒后出现哈哈
	可以在这里面处理异步操作的结果
},function(){
	状态失败时候执行的函数
})

好处是等promise里面,的异步操作执行完成后,在会执行里面的函数调用,可以在 then方法里面处理异步操作的结果

promise有三个状态:

pending 进行中,当异步操作执行中

fulfilled 已成功 当异步状态执行完成后,同时外面调用了then执行了里面的resolve

rejected 已失败 reject()执行了

最后放上promise解决回调地狱的方法(定时器)

javascript"> 
    function fn1(){
   return new Promise((resolve,reject)=>{
      setTimeout(()=>{
         console.log('fn1')
         resolve()
      },1000)
   })
}

function fn2(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('fn2')
         resolve()
      },1000)
   })
}

function fn3(){
   return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('fn3')
         resolve()
      },1000)
   })
}

function onerror(){
   console.log('error')
}

fn1().then(fn2).then(fn3).catch(onerror)

    </script>

http://www.niftyadmin.cn/n/855205.html

相关文章

最近超火的公司前端面试题

前端面试题&#xff1a; 一个200*200的div在不同分辨率屏幕上下左右居中&#xff0c;用css实现 div{ position: absolute; width: 200px; height: 200px; left: 50%; top: 50%; margin-left:-100px; margin-top: -100px; background-color: turquoise; } 写一个左中右布局占满…

ES6新特性及其用法

Es6是什么:ES6是ECMAScript 6的缩写简称&#xff0c;是javascript的核心语法&#xff0c;它是ECMAScript的第6个版本.2015 年 6 月&#xff0c;ECMAScript 6 正式通过&#xff0c;成为国际标准 1.说出至少5个ES6的新特性&#xff0c;并简述它们的作用。&#xff08;简答题&…

源码包安装LAMP+DNS+Discuz6.0 (第二篇)

四、安装php-<?xml:namespace prefix st1 ns "urn:schemas-microsoft-com:office:smarttags" />5.2.3# tar -jvxf php-5.2.3.tar.gz2# mkdir -p /usr/local/php# cd php-5.2.3# ./configure --prefix/usr/local/php (注意此命令要写在一行中) …

一篇文章教你学会vuex

vueX是什么 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享.什么情况下我应该使用 Vuex&#xff1f; Vuex 可以帮助我们管理共享状态&#xff0c;并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您不打算开发大型单页应用&#…

面试题 var let const的区别

var声明变量存在变量提升&#xff0c;let和const不存在变量提升 什么是变量提升:变量提升就是变量和函数的声明会跑到代码的最前面&#xff0c;但是实际 上变量和函数声明的位置并不会动&#xff0c;只是在编译过程中放入了内存之中. let、const在{}定义的是块级作用域,var定义…

vue cli 引入安装bootstrap插件

安装cli详细步骤请看之前文章呦 安装bootstrap必装插件 安装bootstrap必须要先安装jQuery 安装jQuery的方法在npm窗口中输入指令: npm install jquery --save-dev 安装完成以后开始安装bootstrap 指令:npm install bootstrap -D 可选插件 bootstarp依赖插件(看需求是否…

ESX4 虚拟 ESX4

一般人都用VMware Workstation / Server来虚拟ESX,但性能一般&#xff0c;现在&#xff0c;可以尝试用ESX4 虚拟 ESX4 :第一步&#xff0c;设置装在物理主机上的ESX - vSwitch, 将Promiscuous Mode改为Accept第二步&#xff0c;新建一个自定义VM&#xff0c;配置如下&#xff1…

WinCE6.0 R3下载助手

WinCE6.0的R3已经发布了&#xff0c;为了方便大家下载&#xff0c;简单做了一个下载助手&#xff0c;能自动生成R3所有安装文件的下载链接&#xff0c;使用迅雷下载全部链接就免去了通过Setup.exe在线安装的苦楚。 需要的同学请到这里下载&#xff0c;http://files.cnblogs.com…