promise原理以及实现（promise原理简单概括）

一 使用promise封装ajax操作（包含实例对象的属性）

// 使用promise封装ajax
onPromiseAjax () {
  let p = new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest()
  xhr.open('get', 'http://127.0.0.1:8263/todo')
  xhr.send()
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
     	 resolve(xhr.response)
      } else {
      	reject(xhr.status)
      }
  }
  }
})
/*
三 promise实例对象
promise对象（即上边定义的变量p）有两个属性值：
一 PromiseState
调用resolve函数可以将状态值从pending变为fullfilled，调用reject方法可以将状态值从pending变为rejected
也可以在(resolve, reject) => {}函数中抛出错误或者err实例：throw '出问题了'
1. pending(未决定的，初始化的) 2. resolved/fullfilled(成功的) 3. rejected(失败的)
状态改变之后就不能再改变了，这是内置的属性
二 PromiseResult：异步操作的结果
promiseResult的值可以在resolve和reject的函数中进行修改
*/
console.log('p-->>', p)
p.then(value => {
   console.log(value)
  }, reason => {
    console.log(reason)
  })
},

二 promise的API

/*
promise的api
1. Promise.reslove()
如果传入的参数为非promise对象，name返回的结果是一个成功的promise对象
如果传入的是promise对象，那么返回的结果是传入的promise对象的reslove的值
2. Promise.reject
传入的参数是什么，返回的结果就是什么
无论传入什么,结果都是失败的，即该promise对象的状态都是rejected
3. Promise.all
Promise.all([P1, P2,P3]),p1、p2和p3都是一个promise对象
只有三个promise对象全部成功，Promise.all的结果才是成功的，返回的结果是三个promise对象resolve的值组成的数组
只要有返回值是失败的promise，那么返回值是第一个查找到失败结果的promise对象reject的内容
4. Promise.race
Promise.all([P1, P2,P3]),p1、p2和p3都是一个promise对象
三个promise对象谁先执行resolve或者reject函数，那么返回值就是该promise对象resolve或者reject的值
*/
onReslove () {
const p1 = Promise.resolve(5221)
console.log(p1)
const p2 = new Promise((resolve, reject) => {
	resolve('error---hahahah')
})
const p3 = Promise.resolve(p2)
console.log(p3)
const p4 = new Promise((resolve, reject) => {
if (this.test1 === this.test2) {
  resolve('成功了')
  } else {
  const name = '失败了'
  reject(name)
  }
})
const p5 = Promise.resolve(p4)
console.log(p5)
},

三 promise链式回调

/* 一个promise对象可以指定多个回调函数,即可以多个then */
onMultiThen () {
  const p1 = new Promise((resolve, reject) => {
  resolve('error---hahahah')
  })
  p1.then(() => {
  console.log('第一个then')
  })
  p1.then(() => {
  console.log('第二个then')
  })
},

四 then方法返回的promise对象的状态和结果

/*
执行then方法后也是返回一个promise，这个promise对象的结果取决于then方法中的回调函数
1. 如果是throw '',那么afterThen的结果是一个promise，状态是rejected,内容是throw的值
2. 返回的结果是非promise对象，那么状态是fullfilled,内容是返回的内容
3. 返回的结果是promise对象，那么状态和内容取决于返回的promise对象
*/
onAfterThen () {
  // 定义一个promise对象
const p = new Promise((resolve, reject) => {
	resolve('ok')
})
//上一个定义的 promise对象的then方法返回的新的promise对象的状态和结果
const afterThen = p.then(value => {
  // 第一种：throw错误
  // const obj = { time: 'time' }
  // throw obj
  // 第二种：返回非promise对象
  // return '哈哈哈哈哈哈'
  // 第三种：返回promise对象
  const p = new Promise((resolve, reject) => {
    // resolve('返回的是promise对象')
    const obj = { error: 'promise返回的reject内容' }
      reject(obj)
    })
	return p
	}, reason => {})
console.log('afterThen', afterThen)
},

五 回调的穿透

/*
回调的穿透：链式调用then的时候，可以直接在最后进行catch，不用在每一个promise后面调用一次catch
只要在链式调用的过程中throw错误，那么就会直接跳到catch方法中
*/
onCallbackTt () {
  const p = new Promise((resolve, reject) => {
 		resolve('ok')
  })
p.then(value => {
  console.log('1111')
  // 中断promise的链条的方法有且只有一种：返回状态为pending的promise对象
  // 备注:只有promise对象的状态发生改变，才会继续乡下触发then方法
  // 中断promise链条
  return new Promise(() => {})
}).then(value => {
  const obj = { a: 'a' }
  throw obj
}).then(value => {
	console.log('222')
}).catch(err => {
	console.log('err-->>', err)
})
}

六 async结合awaitj进行使用

<template>
<div>
async和await
<div @click="onClick">
async
</div>
<div @click="onSendAjax">async结合await发送ajax请求</div>
</div>
</template>\
<script>
export default {
data () {
return {}
},
methods: {
/* 调用async函数的返回值是一个promise对象：规则和then方法的返回值是一样的
如果return的是非promise对象，那么async函数的返回值的状态是fullfilled,结果是return的内容
如果是promise对象，那么状态和结果值都取决于return的promise对象
如果是throw 错误，那么状态是rejected，结果是throw的内容
*/
/*
await表达式的右边一般是promise对象，但是也可以不是promise对象
如果表达式的右边是promise对象，那么await返回的是promise成功的值
如果表达式是其他的值，直接将此值作为await返回的值
await必须写在async函数中，但是async函数中不用必须有await
如果await的promise失败了，就会抛出异常，需要进行try、catch捕获
*/
onClick () {
  const p = this.main()
  console.log('p--->>>', p)
},
async main () {
  const promiseObj = new Promise((resolve, reject) => {
    resolve('ok')
    // const obj = { a: 'a' }
    // reject(obj)
  })
  try {
    const m = await promiseObj
    console.log(m)
  } catch (e) {
    console.log(e)
  }
  return '哈哈哈'
},
// 使用async和await进行axios操作，获取resolve的成功的值
// 调用onSendAjax,如果存到一个变量中，结果还是一个promise
async onSendAjax (
) {
try {
  const todoContent = await this.axios('http://127.0.0.1:8263/todo')
  console.log('todoContent', todoContent)
} catch (e) {
	console.log(e)
}
}
}
}
</script>