好程序员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

})

}

```