ES6 语法-Promise的用法

首先来看这样一个问题:假如我们在项目中要实现这样一个逻辑,在用ajax请求一个数据成功后再发送另一个请求。很简单我们通常会直接用嵌套的写法,

$.ajax(function(){

url: "xxxx",

type: "post",

async: true,

success: function(data){

$.ajax(function(){

url: "xxxx",

type: "post",

async: true,

success: function(data){

console.log(data);

}

})

}

});

我们用JQ的ajax方法可以很简单的实现,我们想到这样些是因为我们知道javascript是单线程的语言,它的执行顺序是自上而下,这样写是没有什么问题的,但是当问题变得复杂的时候,比如当有很多的请求层层依赖,我们如果还是写样写:

$.ajax(function(){

url: "xxxx",

type: "post",

async: true,

success: function(data){

$.ajax(function(){

url: "xxxx",

type: "post",

async: true,

success: function(data){

console.log(data);

$.ajax(function(){

..........

})

}

})

}

});

我们可以看到,这段代码很长,这样的代码层层嵌套,环环相扣,很不利于后期维护。

在ES6语法的标准中就有Promise这样一个对象来解决多个异步操作的问题,使用这个对象,我们便不再需要这样层层嵌套地来写代码了。Promise是一个对象,也是一个构造函数。首先来看下它的简单写法:

var _promise = new Promise(function(resolve,reject){

resolve("stap1");

});

这样我们就构造了一个promise函数,我们来理解下这段代码,我们定义_promise函数通过new Promise来构造了一个Promise函数,这个函数有一个参数--function(resolve,reject){},这个参数是个函数,而这个函数自己有两个参数resolve和reject,它们也是两个函数,分别是在实例化Promise成功或失败时执行,将实例化结果传递出去,resolve就是将后面的值返回给对象。

我们来看个完整的栗子:

functionrun_1(){

return newPromise(function(resolve,reject){

//假设已经进行了异步操作,并且获得了数据

//resolve("step1");

if(2

resolve(false);

}else{

resolve(true);

}

});

}

run_1().then(function(data){

console.log(data)

},function(data){

console.log(data);

});

我们先封装了一个构造Promise函数的函数run_a,这个方法将构造的Promise函数return出,每个实例化的Promise对象都有then()方法,用来处理之前异步操作的结果,then方法有两个参数,分别时两个函数,第一个用来处理之前异步操作成功的函数,第二个是用来处理失败的结果。

有一点需要注意下,每个then方法执行后会返回一个Promise实例,也就是说then()可以一直写下去:run_a().then().then()....then();

再举个栗子,比如,之前说的,涉及到多层嵌套,我们用Promise怎么实现呢?假设有三个异步任务,分别是run_1,run_2,run_3,需要run_1执行成功后再执行run_2,run_2执行成功后再执行run_3,

//第一个异步任务

functionrun_1(){

return newPromise(function(resolve,reject){

//假设已经进行了异步操作,并且获得了数据

resolve("run1");

});

}

//第二个异步任务

functionrun_2(data_1){

return newPromise(function(resolve,reject){

//假设已经进行了异步操作,并且获得了数据

console.log(data_1);

resolve("run2");

});

}

//第三个异步任务

functionrun_3(data_2){

return newPromise(function(resolve,reject){

//假设已经进行了异步操作,并且获得了数据

console.log(data_2);

resolve("run3");

});

}

它们的调用顺序就是这样写的:

//连续调用

run_1().then(function(data){

returnrun_2(data);

}).then(function(data){

returnrun_3(data);

}).then(function(data){

console.log(data);

});

前面讲过then()有两个函数参数分别执行前面异步操作成功或失败的处理,且第一个执行成功的处理,第二个执行失败的处理,当只写一个时就只执行成功的处理。

当我们要写多个ajax请求,且这些请求互相依赖,我们就可以使用Promise方法来处理代码逻辑,将这些请求分别通过Promise实例化,然后根据他们之间的调用逻辑,分别写在then()方法中就可以,而不需要像之前那样层层嵌套地写代码,增加代码地可读性,也方便后期维护。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190108G0ZRVB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券