promise

前言

在es6中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻promsie。

异步

在讲promise前我们先要知道什么是异步

在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行)。而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是:同步 按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效率更高。

我们看一下下面的代码

js 复制代码
function foo(){
    setTimeout(()=>{
        console.log('ling');
    },1000)
}

function bar(){
    console.log('long');
}
foo();
bar();

执行结果:

先出现的long过了一秒出现ling,为什么会这样呢?如果先等一秒出现long再出现ling就是同步,如图就是异步,但是世界上的任何一种语言不会是同步,设计成异步能提高运行效率。当js引擎遇到需要耗时的任务时会先跳过,执行完不耗时的代码再来执行耗时的。

在以前没有promise时候的程序员是怎么解决这个问题的呢

js 复制代码
let data=null;

function a(){
    setTimeout(()=>{
       data={name:'dai'} 
    },1000)
}


function b(){
    console.log(data.name+'好帅')
}

a();
b();

根据前文可知这种情况会报错,b会先执行,但a不先执行,data就没有name,这里一定要先执行a再执行b,那怎么办呢?

js 复制代码
let data=null;



function a(){
    setTimeout(()=>{
       data={name:'dai'} 
       b();//不跑完a,b也跑不了
    },1000)
}


function b(){
    console.log(data.name+'好帅')
}

a();

我们只需要将b放在方法a中执行就行了。但这样会出现一个新的问题,在一些大型项目中,其中的代码都是几千上万行,当出现a没结果b就无法执行,b没结果c无法执行(回调地狱)...........这个时候程序员的心态是爆炸的,当出现一个错误时,可能就会看到满屏的红色。为了解决这个问题我们的超人promise应运而生。

promise的介绍和用法

Promise是一个构造函数,生成promise实例,promise有三种状态

Resloved:表示操作成功

Rejected:表示操作失败

Pending:表示既没有成功也没有失败,等待中

具体用法如下代码

js 复制代码
function xq() {
    return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('徐总相亲');
         resolve();//成功    reject();//失败
    },2000)
  })
}

function marry(){
    return new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log('结婚');
        resolve();//成功    reject();//失败
    },1000)
 })
}


 function baby(){
    console.log('小徐出生');
 }


 xq().then(()=>{
    marry().then(()=>{
        baby();aomiao
    });
 });

这里我们写了三个方法,xq和marry都要耗时,如果没有promise顺序就会相反。在xq和marry中,都需要return promise对象,可能是resolve成功,也可能是reject失败。如果成功了才会执行.then里的回调函数,失败了会执行.catch里的函数,所以这里的结果就会是先等两秒出现"徐总相亲",等一秒出现"结婚"和"小徐出生"。

其中resolve和reject里面是可以写参数的

js 复制代码
function xq() {
    return new Promise((resolve,reject)=>{
    setTimeout(()=>{
         console.log('徐总相亲');
         resolve('相亲成功');//成功    reject();//失败
    },2000)
  })
}

function marry(){
    return new Promise((resolve,reject)=>{
    setTimeout(()=>{
        console.log('结婚');
        resolve('新婚快乐');//成功    reject();//失败
    },1000)
 })
}


 function baby(){
    console.log('小徐出生');
 }
 
 
 xq()
 .then((res)=>{
    console.log(res);
    return marry()
    .then((res2)=>{
        console.log(res2);
        baby();
    });

 });

结果就会是

总结

promise就是为了解决异步问题被创造出来的方法,可以控制代码的执行顺序。

感谢你的观看, 希望对你有用。

相关推荐
落魄小二8 分钟前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236489 分钟前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
fruge22 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia31 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
嚣张农民38 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Rattenking1 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫2 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
别拿曾经看以后~4 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
川石课堂软件测试4 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana