小小千想和您聊一聊

当前位置: 首页> 技术分享> 怎么用promise解决回调和异步

怎么用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
	})
}
```

上一篇:测试开发是代表懂测试的开发还是懂开发的测试?

下一篇:初学者搞懂i++和++i

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码