当前位置: 首页 / 技术分享 / 正文
好程序员web前端培训分享怎么用promise解决回调和异步

2019-12-06

HTML5 HTML5培训 好程序员 web前端培训

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

})

}

```

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-02-17(北京)

    开班盛况

    开班时间:2020-03-02(深圳)

    开班盛况
  • 大数据+人工智能 <好程序员严选班>

    开班时间:2019-12-23(北京)

    开班盛况
  • 大数据+人工智能 <好程序员班>

    开班时间:2020-02-24(杭州)

    开班盛况

    开班时间:2020-02-17(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2020-03-09(北京)

    开班盛况
  • Python全栈+人工智能 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2020-02-24(北京)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2007-2019 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号