ES6——promise基础知识

一、Promise

1. promise出现的原因

为了解决回调地狱问题。

2. promise的基本使用

Promise是一个构造函数，通过new关键字实例化对象

语法

new Promise((resolve, reject) => {})

• Promise接受一个函数作为参数
• 在参数函数中接受两个参数
  • resolve：成功函数
  • reject：失败函数

promise实例

promise实例有两个属性

• state：状态
• result：结果

1）promise的状态

1. pending：准备，待解决，进行中
2. fulfilled：已完成，成功
3. rejected：已拒绝，失败

2）promise状态的改变

示例

const p = new Promise((resolve, reject) => {
	// resolve():是一个函数，调用该函数使当前promise状态改为fulfilled
	resolve();
})
console.dir(p)	//fulfilled

示例

const p = new Promise((resolve, reject) => {
	// reject():是一个函数，调用该函数使当前promise状态改为rejected
	reject()
})
console.dir(p)	// rejected

• resolve():是一个函数，调用该函数使当前promise状态改为fulfilled；
• reject():是一个函数，调用该函数使当前promise状态改为rejected；
• promise状态改变是一次性的。

3）promise的结果

示例

const p = new Promise((resolve, reject) => {
	// 通过调用resolve函数传递参数来改变当前promise对象的结果
	resolve('success!')
	// reject("failed!")
})
console.dir(p)

3. promise的方法

1）then方法

const p = new Promise((resolve, reject) => {
	resolve('成功的结果')
})

// then方法函数
// 参数：1、一个函数 2、还是一个函数
// 返回值：是一个promise对象
p.then(() => {
  // 当promise的状态是fulfilled时，执行
  console.log('成功时调用')
},() => {
  // 当promise的状态是rejected时，执行
  console.log('失败时调用')
})
console.dir(p)

示例

const p = new Promise((resolve, reject) => {
	resolve('成功的结果')
})

// then方法函数
// 参数：1、一个函数 2、还是一个函数
// 返回值：是一个promise对象
p.then((value) => {
  // 当promise的状态是fulfilled时，执行
  console.log('成功时调用', value)
},(reason) => {
  // 当promise的状态是rejected时，执行
  console.log('失败时调用', reason)
})
console.dir(p)

• 在then方法的参数函数中，通过形参value和reason使用promise对象的结果。

then方法返回一个新的promise示例，而且它的状态是pending。

const p = new Promise((resolve, reject) => {
	resolve('成功的结果')
})

// then方法函数
// 参数：1、一个函数 2、还是一个函数
// 返回值：是一个promise对象
const t = p.then((value) => {
  // 当promise的状态是fulfilled时，执行
  console.log('成功时调用', value)
},(reason) => {
  // 当promise的状态是rejected时，执行
  console.log('失败时调用', reason)
})
console.dir(t)

promise的状态不改变，不会执行then里面的方法

const p = new Promise((resolbe, reject) => {})
p.then((value) => {
  console.log('success')
},(reason) => {
  console.log('failed')
})

在then方法中，通过return将promise实例的状态改为fulfilled

// 如果promise的状态不改变，不会执行then里面的方法
const p = new Promise((resolve, reject) => {
	resolve()
})

const t = p.then((value) => {
  console.log('success1')
  // 使用return可以将t实例的状态改为fulfilled
  return 123
},(reason) => {
  console.log('failed1')
})

t.then((value) => {
  console.log('success2', value)
},(reason) => {
  console.log('failed2')
})

如果在then方法中出现代码错误，会将返回的promise实例的状态改为rejected

// 如果promise的状态不改变，不会执行then里面的方法
const p = new Promise((resolve, reject) => {
	resolve()
})

const t = p.then((value) => {
  console.log('success1')
  // 使用return可以将t实例的状态改为fulfilled
  // return 123
    
  // 如果这里的代码出错，会将t实例的状态改为rejected
  console.log(a)
},(reason) => {
  console.log('failed1')
})

t.then((value) => {
  console.log('success2', value)
},(reason) => {
  console.log('failed2')
})

2）catch方法

示例

const p = new Promise((resolve, reject) => {
  // reject()
  // a是未声明的变量
  // console.log(a)
  throw new Error('出错了')
})

// catch中的参数函数在什么时候被执行？
// 1. 当promise的状态改为rejected时，被执行
// 2. 当promise的执行体中出现代码错误时，被执行
p.catch((reason) => {
  console.log('失败', reason)
})
console.log(p)

3）Promise.all方法

Promise.all 接受一个 promise 数组作为参数（从技术上讲，它可以是任何可迭代的，但通常是一个数组）并返回一个新的 promise，他可以并行执行多个promise，并等待所有 promise 都准备就绪。

当所有给定的 promise 都被 settled 时，新的 promise 才会 resolve，并且其结果数组将成为新的 promise 的结果。

如果任意一个 promise 被 reject，由 Promise.all返回的 promise 就会立即 reject，并且带有的就是这个 error。

4. promise的最常见写法

const p = new Promise((resolve, reject) => {

}).then((value) => {
  //  成功时被执行
  console.log(value)
}).catch((reason) => {
  // 失败时被执行
  console.log(reason)
})

5. 用promise解决回调地狱

function getData(url, data = {}) {
return new Promise((resolve, reject) => {
  $.ajax({
    type: 'GET',
    url: url,
    data: data,
    success: function (res) {
      // 修改promise的状态为成功，并且修改promise的结果res
      resolve(res)
    },
    error: function (res) {
      // 修改promise的状态为失败，并且修改promise的结果res
      reject(res)
    },
  })
})
}

getData('data1.json')
.then((data) => {
  // console.log(data)
  const { id } = data // 对象解构
  return getData('data2.json', { id })
})
.then((data) => {
  // console.log(data);
  const { username } = data
  return getData('data3.json', { username })
})
.then((data) => {
  console.log(data)
})

二、Promise常考面试题

1. async、await和Promise的关系

1、执行async函数，返回的都是Promise对象

2、Promise.then 成功的情况 对应 await

3、Promise.catch 异常的情况 对应 try…catch

// 执行async函数，返回的都是Promise对象
async function test1() {
  return 1
}

async function test2() {
  return Promise.resolve(2)
}

const result1 = test1()
const result2 = test2()
console.log('result1', result1)
console.log('result2', result2)

// Promise.then 成功的情况 对应 await
async function test3() {
  const p3 = Promise.resolve(3)
  p3.then((data) => {
    console.log('data', data) // data 3
  })
  const data3 = await p3
  console.log('data3', data3) // data3 3
}

test3()

async function test4() {
  const data4 = await 4
  console.log('data4', data4)
}

test4() // data4 4

async function test5() {
  const data5 = await test1()
  console.log('data5', data5)
}

test5() // data5 1

// Promise.catch 异常的情况 对应 try...catch
async function test6() {
  const p6 = Promise.reject(6)

  try {
    const data6 = await p6
    console.log('data6', data6)
  } catch (e) {
    console.error('e', e)
  }
}

test6()