Promise的基本应用

Promise的基本应用

早之前就知道promise，但是苦于一直没有理解，在准备一些面试的时候也被问到过Promise，但是没有太多的实战经验，一直理解不是很到位，一直在查找资料学习如何应用，这几天有了一点自己的理解，记录下来，这里只是基本应用；

基本知识：

1. Promise有三个状态，分别是

• PENDING
• FULFILLED
• REJECTED

2. 有两个基本的函数

• resolve()
• reject()

3. 原型上还有一函数

• then()

new Promise((resolve,reject)=>{
  //立即执行
  console.log('1');
  resolve('success');
});

这里会立即输出 1；之后执行resolve()函数，将值传给resolve()函数，但是没有写then函数所以，不执行后续操作

//增加变量，之后增加then（）
 let p = new Promise((resolve,reject)=>{
  //立即执行
  console.log('1');
  resolve('success');
});
p.then((res)=>{
  console.log(res);
});

输出结果为1，success，这里比上面增加了变量接受Promise，然后增加then()做状态变化后的处理。然后对比下面这个代码看，你或许有其他的感悟：

//增加变量，之后增加then（）
let p = new Promise((resolve,reject)=>{
 //立即执行
 console.log('1');
 //注释去掉此行代码
 //resolve('success');
});
p.then((res)=>{
 console.log(res);
});

输出结果为1，then()方法不执行，因未执行resolve()函数，promise的状态一直是PENDING，那么只有resolve()函数可以改变状态吗，不是的reject（）也是可以的，一个是成功时将状态改变为FULFILLED，一个是出现异常或者失败时将状态改变为REJECTED，看下比较完整的应用代码：

 //增加变量，之后增加then（）
  let p = new Promise((resolve,reject)=>{
	//立即执行
	console.log('1');
	//随机生成一个数字
	var num = Math.ceil(Math.random()*10);
	//数字小于5，认为成功，调用resolve（），否则失败，调用reject()
	if(num<=5){
	     resolve('success');
	}else{
	     reject('fail');
	}
});
//then传入两个函数，第一个成功时执行，第二个失败时执行
p.then((res)=>{
   console.log(res);
},(res)=>{
   console.log(res);
});

那么下面就是大家最熟悉的Promise和异步编程的关系，大家最熟悉的异步操作无非就是请求后端接口，大家都知道我们去请求后端接口时需要等到数据回来之后再去做一些事情，但是我们的j s线程不能一直在等待数据，那么我们用promise如何写呢？

 //增加变量，之后增加then（）
  let p = new Promise((resolve,reject)=>{
	//立即执行
	console.log('1');
	//异步操作,这儿会立即请求数据
	axios.get('unactive_url')
           .then((data)=>{
           	//数据成功后，调用resolve()函数，之后执行t hen（）里面的函数
           	resolve(data)
           })
           .catch(()=>{
           	reject('unactive_url_reject')
           })
});
//then传入两个函数，第一个成功时执行，第二个失败时执行
p.then((res)=>{
   console.log(res);
},(res)=>{
   console.log(res);
});

那么大家可能有疑问，我们本可以把请求数据成功后执行的代码直接写到函数里，为什么要用Promise呢？我认为有这么两点：

1. 异步操作不是只有a xi o s这一种，比如setTimeout()呢，另外，如果把代码都写函数里，逻辑不是很清楚
2. 如果多个异步操作在一起呢？如果现在有两个数据接口都要请求后端数据，但是只有这两个接口都返回数据时，才能渲染页面，那么如何处理呢？其实这里用promise.all（）方法就可以很好的解决这个事情。

这里知识简单讲解下promise()的基本应用