好程序员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.() {

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

}

img.() {

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.{

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

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

}

}

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

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

},5000)

})

return promise;

}

document.() {

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

pro.then(function (msg) {

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

},function (msg) {

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

})

}

```