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()方法中就可以，而不需要像之前那样层层嵌套地写代码，增加代码地可读性，也方便后期维护。