关于Promise我们还是从是什么，为什么，怎么用三个方面来谈谈对他的认识
【1】Promise是什么
Promise 是ES6里面异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。而Promise 将嵌套调用改为链式线性调用，增加了可阅读性和可维护性。
简单说Promise 就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
有三种状态，pending（进行中）、resolved（已完成）、rejected（已失败），特点是只有异步操作的结果，可以决定当前是哪一种状态，状态一旦改变，就无法再次改变状态；
Promise常用的方法：
1.类方法（静态方法）：
(1)resolved：成功状态返回一个 Promise 对象；
(2)reject：失败状态返回一个Promise 对象；
(3)race：多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败；
(4)all：如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果，如果有错误就返回reject的结果；
2.实例方法：
(1).then：它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的
(2).catch：异常处理；
(3).finally:不管 Promise 对象最后状态如何成功或失败，都会执行的操作
promise特点
1.对象的状态不受外界影响。
2.一旦状态改变，就不会再变，任何时候都可以得到这个结果，这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
promise缺点
1.一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来
2.错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
3.Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）
正是因为这些原因，ES7引入了更加灵活多变的async，await来处理异步,后面我们说
【2】为什么出现Promise
业务上遇到一个请求要依赖前一个请求的结果，如果多个层层回调函数的嵌套叫做“回调地域”，代码不美观而且不易于维护，所以Promise出现了他的链式调用可以解决这一个问题
【3】怎么用Promise
//ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
const promise = new Promise();
//Promise构造函数的参数是一个函数，该函数的两个参数分别是resolve和reject。resolve和reject也是函数，由 JavaScript 引擎提供，不用自己定义这两个函数。
内置的resolve函数的作用是：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；resolve()可以用来传递参数给then
内置的reject函数的作用是：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise举例：
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);//调用内置的resolve函数
} else {
reject(error);//调用内置的reject函数
}
});
或者写成箭头函数
const promise = new Promise((resolve, reject)=> {
// ... some code
if (/* 异步操作成功 */){
resolve(value);//调用内置的resolve函数
} else {
reject(error);//调用内置的reject函数
}
});
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
const promise = new Promise();
promise.then();
then方法可以接受两个回调函数作为参数。第一个是resolved状态的回调函数，第二个是rejected状态的回调函数。中间逗号衔接，这两个函数都是可选非必填的。它们都接受Promise对象传出的值作为参数。
then式链式写法的本质其实是一直往下传递返回一个新的Promise，也就是说then在下一步接收的是上一步返回的Promise，理解这个对于后面的细节非常重要！！
let promise = new Promise(function(resolve, reject) {
// ... some code
let name='jack'
if(name=='jack'){
// if (name!='jack'){
resolve('成功啦'+name);//调用内置的resolve函数
}else{
reject('失败啦'+name);//调用内置的reject函数
}
});
promise.then(function(value) {
// 成功-这是resolved状态的回调函数
console.log(value)//成功啦jack
}, function(error) {
// 失败-这是rejected状态的回调函数
console.log(error)//失败啦jack
});
核心用法：链式调用
Promise实例使用then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。又因为每一个Promise实例都有.then方法，因此可以采用链式写法，即then方法后面再调用另一个then方法。
采用链式的then，可以有序调用回调函数。后一个 then会根据前一个then之后返回的Promise对象的状态(成功/失败)去决定走后一个then的成功回调还是失败的回调
const promise = new Promise((resolve, reject)=> {
// ... some code
});
promise.then().then().then()...
//举例1秒后输出“成功”字符串
const MyPromise=function(time){
let promise = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
resolve('成功');
}, time);
});
return promise;
}
//完整三层链式调用
MyPromise().then(function(succesData) {
//第一个then的第一个回调是成功的
console.log('结果是: ' + succesData);
},function(errorData) {
//第一个then里的第一个回调是成功的
console.error('出错了', errorData);
}).then(function(succesData) {
//第二个then的第一个回调是成功的
console.log('结果是: ' + succesData);
},function(errorData) {
//第二个then里的第一个回调是成功的
console.error('出错了', errorData);
}).then(function(succesData) {
//第三个then的第一个回调是成功的
console.log('结果是: ' + succesData);
},function(errorData) {
//第三个then里的第一个回调是成功的
console.error('出错了', errorData);
});
因为.then里面的两个函数参数是非必须的，一般只写第一个的成功的回调。有人要问既然有了很多的Promise对象那么多的then，那么我需不需要写很多catch来捕获错误呢？
答案当然是：不需要！，哪有那么麻烦的写法，只需要在末尾catch一下就可以了，因为链式写法的错误处理具有“冒泡”特性，链式中任何一个环节出问题，都会被catch到，同时在某个环节后面的代码就不会执行了。所以可以把上面的简化下改写成
//简化三层链式调用并且改成箭头函数
MyPromise(1000).then(function(succesData) {
//修改一下
succesData=succesData+"1"
//第一个then的成功回调
console.log('第一个then拿到的数据：' + succesData);
return succesData
}).then(function(succesData) {
//修改一下
succesData=succesData+"2"
//第二个then的成功回调
console.log('第二个then拿到的数据：' + succesData);
return succesData
}).then(function(succesData) {
//修改一下
succesData=succesData+"3"
//第三个then的成功回调
console.log('第三个then拿到的数据：' + succesData);
return succesData
}).catch((err)=>{ // 这里移到第一个链式去，发现上面的不执行了，下面的继续执行
console.log(err);
})
promise的then链式调用仍然是层层依赖的逻辑但是不会像“地狱回调”那么不美观和不易于维护
promise & axios
axios 是由 promise 封装的一个 http 的库。axios本身就是一个promise。所以也继承一些个方法比如.then
比如axios我们通过then也可以用then的链式调用代替回调地狱注意return出去才是一个prominse对象才可以继续使用.then
created(){
this.$axios({
method: 'post',
dataType: 'json',
url: '/customer/selectListByPage',
data:{}
}).then(function (res) {
//第一层
console.log(res.data)
//需要return要不然后面拿不到输出时undefinded
return res.data
}).then(function (data) {
//第二层
console.log(data)
return data
}).then(function (data) {
//第三层
console.log(data)
}).catch((err)=>{
console.log(err);
})
},
promise & async/await
async/await 是es7出来的， await顾名思义就是‘等一下’（等一下我这个promise异步执行完你下面的再执行）让异步编程做起来更有同步的感觉。
【特点】
（1）async用来声明修饰函数的，返回一个Promise，所以可以用.then方法
（2）await 修饰的如果是Promise对象：则可以让异步编程做起来更有同步的感觉；
如果修饰的不是Promise对象，比如定时器，就把这个非promise的东西当做await表达式的结果直接同步执行不会延迟。
（3）await只能放在async定义的函数内。
常用的申明async的方法：
// 函数声明
async function foo() {} || async foo() {}
// 函数表达式
const foo = async function () {};
// 箭头函数(箭头函数只能用赋值式写法，不能用声明式写法)
const foo = async () => {};
举个例子：3秒后才执行打印，异步的代码但是同步的feel这正是async/await配合Promise要实现的效果
const demoFun=async ()=>{
//【1】await申明的只有是一个Promise才可以实现异步的同步执行
let result = await new Promise((resolve, reject) => {
setTimeout(()=>{//用定时器模拟异步的耗费时间的网络请求
//resolve必须有 do something
resolve("代表成功执行完毕异步的代码");
}, 3000)
});
//【2】
console.log('我是张三');
return "我是返回值"
}
//开始调用上面的方法
demoFun() // 三秒后输出“我是张三”，印证上面【1】同步执行完才执行【2】
//在或者也可以是使用.then方法，async的函数就是一个Promise所以可以用.then
demoFun().then(res=>{
console.log(res); // 输出return的东西=》"我是返回值"
}).catch((err)=>{
console.log(err);
})
但是和上面同样的代码只是await后面不是一个Promise而是一个定时器，直接就执行了打印，没等待3秒，所以印证上面【特点】（2）await 修饰的如果是Promise对象：则可以让异步编程做起来更有同步的感觉；如果修饰的不是Promise对象，比如定时器，就把这个非promise的东西当做await表达式的结果直接同步执行不会延迟。
const demoFun = async ()=>{
//await申明的不是Promise实现不了异步的同步执行
let result = await setTimeout(()=>{
console.log(1)
}, 3000)
console.log('我是张三');
return '我是返回值';
}
//开始调用上面的方法
demoFun() // 不会等待三秒而是直接打印'我是张三'
//在或者也可以是使用.then方法，async的函数就是一个Promise所以可以用.then
demoFun().then(res=>{
console.log(res); // 输出return的东西=》"我是返回值"
}).catch((err)=>{
console.log(err);
})
先停顿一下来个小插曲：
前面介绍async/await说到，通常async/await是跟随Promise一起使用的，而axios又是基于promise封装，所以我们可以将 async/await和axios 结合一起使用。网上很多都是把axios外面又套一层promise那是不科学或者没有理解axios的本质的做法，要知道：axios就是ajax基于promise封装成的一个promise，本质就是一个promise，所以没必要去套一层promise
const demo =async () => {
//第一个异步promise（axios）接口请求数据
const result1 = await this.$axios({
method: 'post',
dataType: 'json',
url: '/customer/selectListByPage',
data:{}
}).then(funtion(data){
//then方法的第一个参数data是resolved状态执行成功的回调函数
return data
})
console.log(result1)
//第一个执行完毕之后再第二个异步promise（axios）接口请求数据
const result2 = await this.$axios({
method: 'post',
dataType: 'json',
url: '/customer/selectListByPage',
data:{}
}).then(funtion(data){
//then方法的第一个参数data是resolved状态执行成功的回调函数
return data
})
console.log(result2)
//返回值实质上是一个promise
return result1+result2
}
//调用
demo().then(result=>{
console.log('输出:',result);
}).catch((err)=>{
console.log(err);
})
更好的理解还可以写成
const getData1 = () => {
//需要return保证async里面await调用的是一个promise
return this.$axios({
method: 'post',
dataType: 'json',
url: '/customer/selectListByPage',
data:{}
}).then(funtion(data){
//then方法的第一个参数data是resolved状态执行成功的回调函数
return data
})
}
const getData2 = () => {
//需要return保证async里面await调用的是一个promise
return this.$axios({
method: 'post',
dataType: 'json',
url: '/customer/selectListByPage',
data:{}
}).then(funtion(data){
//then方法的第一个参数data是resolved状态执行成功的回调函数
return data
})
}
//async/await实例
const demo =async () => {
//第一个异步promise（axios）接口请求数据
const result1 = await getData1()
console.log(result1)
//执行完第一个再执行二个异步promise（axios）接口请求数据
const result2 = await getData2()
console.log(result2)
//两个都执行完再执行，返回值实质上是一个promise
return result1+result2
}
//调用-结果就是既规避了回调地狱又让异步编程做起来更有同步的感觉
demo()
