Promise

什么是Promise

可以把Promise看成是一个状态机。它存在三个状态（pending-等待中,rejected-已失败,resolved-已完成），它的状态改变时单向的。只能从pending-resolved或者pending-rejected。只要状态发生改变了，状态就凝固了不会再发生改变。将传统意义上的回调变成了链式的回调来处理。

Promise的作用

1.为了解决异步回调问题
2.将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3.可以在对象之间传递和操作promise，帮助我们处理队列

介绍Promise

new Promise(function (resolve,reject){
	setTimeout(function(){
		resolve('成功')  // 数据处理成功
		reject('失败')  // 数据处理失败
	},2000)
}).then(res => {
	console.log(res)  
},err => {
	console.log(err)
})

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
• reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

应用场景

promise完成后then()

let pro = new Promise(resolve => {
   setTimeout(() => {
     resolve('hello world')
   }, 2000)
 })
 setTimeout(() => {
   pro.then(value => {
   console.log(value) // hello world
 })
 }, 2000)

结论：promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方。

.then()

• 接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败）
• .then()返回一个新的Promise实例，所以它可以链式调用
• 当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行
• 状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null
• 如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行
• 如果返回其他任何值，则会立即执行下一级.then()

.then()里面有.then()的情况

• 因为.then()返回的还是Promise实例
• 会等里面的then()执行完，再执行外面的

new Promise(resolve => {
	console.log('step-1')
	setTimeout(function(){
		resolve(1)
	})
}).then(value => { // value = 1
	return new Promise(resolve => {
		console.log('step-2')
		setTimeout(() => {
			resolve(2)
		})
	})	
}).then( value => { // value = 2
	console.log('step-3')
	return value	// value = 2
}).then( value => { // value = 2
	console.log('step-4')
	return value  // value = 2
})

错误处理

1、reject(‘错误信息’)

new Promise((resolve,reject) => {
	console.log('step-1')
	setTimeout(function(){
		reject('失败')
	})
}).then(val => {}, err => {
	console.log('Error' + err)
})

2、throw new Error(‘错误信息’).catch()

new Promise((resolve,reject) => {
	setTimeout(function(){
		resolve('失败')
	})
}).then(val => {
	throw new Error('erroe')
}).catch(err => {
	console.log('catch'+ err)
})

catch也会返回一个promise实例，并且是resolved状态

Promise.all() 批量执行

function p1(){
	console.log('p1');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
		setTimeout(function(){
        	console.log('p1执行完毕！');
            resolve('p1');
       	}, 1000);
   	});
    return p;
}
function p2(){
	console.log('p2');
    var p = new Promise(function(resolve, reject){        //做一些异步操作
        setTimeout(function(){
        	console.log('p2执行完毕！');
            resolve('p2');
        }, 1000);
   	});
    return p;
}
Promise.all([p1(), p2()]).then((result) => {
	console.log(result);
})

Promise.all([p1, p2, p3])用于将多个promise实例，包装成一个新的Promise实例，返回的实例就是普通的promise
它接收一个数组作为参数
数组里可以是Promise对象，也可以是别的值，只有Promise会等待状态改变
当所有的子Promise都完成，该Promise完成，返回值是全部值得数组
有任何一个失败，该Promise失败，返回值是第一个失败的子Promise结果

Promise.race() 类似于Promise.all() ，区别在于它有任意一个完成就算完成

let p1 = new Promise(resolve => {
	setTimeout(() => {
		resolve('I\`m p1 ')
	}, 1000)
});
let p2 = new Promise(resolve => {
	setTimeout(() => {
		resolve('I\`m p2 ')
	}, 2000)
});
Promise.race([p1, p2])
    .then(value => {
        console.log(value)
})

实战示例

// Promise 写法
  // 第一步：获取城市列表
  const cityList = new Promise((resolve, reject) => {
    $.ajax({
      url: 'xxx',
      success (res) {
        resolve(res)
      }
    })
  })

  // 第二步：找到城市是北京的id
    cityList.then(res => {
      let findCityId = res.filter(item => {
        if (item.id == 'c1') {
          return item
        }
      })[0].id
      
      findCompanyId().then(res => {
        // 第三步（2）：根据北京的id -> 找到北京公司的id
        let findPostionId = res.filter(item => {
            if(item.cityId == findCityId) {
              return item
            }
        })[0].id

        // 第四步（2）：传入公司的id
        companyInfo(findPostionId)

      })

    })

  // 第三步（1）：根据北京的id -> 找到北京公司的id
  function findCompanyId () {
    let aaa = new Promise((resolve, reject) => {
      $.ajax({
        url: 'xxx',
        success (res) {
          resolve(res)
        }
      })
    })
    return aaa
  }

// 第四步：根据上一个API的id(findPostionId)找到具体公司，然后返回公司详情
function companyInfo (id) {
  let companyList = new Promise((resolve, reject) => {
    $.ajax({
      url: 'xxx',
      success (res) {
        let comInfo = res.filter(item => {
            if (id == item.id) {
               return item
            }
        })[0]
        console.log(comInfo)
      }
    })
  })
}