好程序员web前端教程分享怎么用promise解决回调和异步

好程序员web前端教程分享怎么用promise解决回调和异步

首先让我们看看下面这题输出什么?

```

setTimeout(function() {

      console.log(1);

},1000)

console.log(2);

```

我们得到的结果是:先输出2,后输出1;这是什么原因呢?大家应该都知道定时器是异步的;所以先先输出2;

那么我们的需求来了,怎么先输出1,然后输出2呢?

```

function foo(callback) {

setTimeout(function() {

console.log(1);

callback();

},1000)

}

foo(function() {

      console.log(2);

})

```

现在我们看看打印的结果吧,果然先输出的1,然后输出2了;这个是通过回调函数解决的;

现在我么你的需求变了,我们每隔1秒后做一次输出;

```

function foo(callback) {

setTimeout(function() {

console.log("1秒后输出");

callback()

}, 1000)

}

foo(function() {

console.log("第一次输出");

foo(function() {

console.log("第二次输出");

foo(function() {

console.log("第二次输出");

})

})

})

```

这样是不是解决我们的问题了呢?

>是的,但是如果我们多来几次,大家会不会发现回调的太多了吗?这就是大家所说的毁掉地狱;

 

###所以ES6给我们提供了一个解决毁掉地狱的方法:promise;

**promise是一种用异步的方式处理值的方法,promise是一个对象,解决层层嵌套问题**

####promise对象的状态:

>进行中: pending

成功: resovled

失败: rejected

 

**promise对象的方法:**

>then() 成功后执行; 如果有两个参数:第一个参数成功后执行,第二个参数失败后执行;

catch() 失败后执行;

人promise all([]).then() 都成功后执行图then的第一个方法;

promise.race[(p1,p2,p3,---)] 只要有一个率先改变状态,promise就会执行对应的状态

```

var promise = new Promise(function (resolved, rejected) {

resolved("ok");

rejected("no");

//如果成功和失败同时写,执行先写的;(特点状态一旦改变,就不可逆了)

});

promise.then(function(msg) {

console.log("ok:" + msg);

},function (msg) {

console.log("no:" + msg);

});

```

打印结果是: ok: ok

现在我们做一个练习: 使用promise 加载一张图片;加载成功就将图片加载到body中,如果加载失败,提示失败;

```

var promise = new Promise(function (resolved, rejected) {

var img = document.createElement("img");

img.src = "./img/1.png";

img.onload = function () {

resolved(img)   //如果加载成功就返回resolved()

}

img.onerror = function () {

rejected("失败")    //如果加载成功就返回rejected()

}

})

promise.then(function (msg) {

document.body.appendChild(msg)

},function (msg) {

alert(msg)

})

```

怎么样大家是不是对promise有了了解?

那么怎么用promise解决异步的问题呢?我们还是每隔1秒后做一次输出;

```function fn() {

var promise = new Promise(function(resolved, rejected) {

setTimeout(function() {

console.log("每隔一秒");

resolved()

}, 1000)

});

return promise;

}

fn().then(function() {

console.log("第一次输出");

return fn()

}).then(function() {

console.log("第二次输出");

return fn()

}).then(function () {

console.log("第三次输出");

})

```

那Promise如何解决ajax回调的问题呢?咱们继续往下看.

```

function ajaxPromise(url) {

var promise = new Promise(function(resolved, rejected) {

var xhr = new XMLHttpRequest();

xhr.open("get", url);

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4 && xhr.status === 200) {

resolved( xhr.responseText);   //告诉promise成功了

}

}

setTimeout(function () {//5秒后请求不到

rejected("error")  //告诉promise失败了

},5000)

})

return promise;

}

document.onclick = function () {

var pro = ajaxPromise("data.json");

pro.then(function (msg) {

alert(msg)   //如果路径对了,我们得到了数据

},function (msg) {

alert(msg) //如果路径错了我们弹出error

})

}

```