Vue学习-Promise

花猪

发布于 2022-02-17 15:57:54

2810

发布于 2022-02-17 15:57:54

文章被收录于专栏：花猪的学习记录

前言

本文将介绍Promise的使用。

由于没有后端代码，对于ajax异步请求事件的实现就用setTimeout()函数代替：

setTimeout(() => {
  console.log('Hello World');
}, 1000)

Promise

ES6提供了Promise对象。对于有异步请求的需求时，可以使用Promise对异步操作进行封装。其优势就是可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数（“回调地狱”）。

基本使用

创建

可以直接使用new来调用Promise的构造器来进行实例化：

new Promise((resolve, reject) => {
  //异步处理代码
})

说明： Promise的参数为一个函数，该函数又会调用resolve或者reject函数

三种状态

Promise 对象有三种状态：

pending: 初始状态，不是成功或失败状态
fulfilled: 意味着操作成功完成
rejected: 意味着操作失败

使用

当异步请求成功时，会调用resolve函数，其中该函数的参数即为请求的数据，在Promise对象的末尾可以接promise.then()函数，其中请求的数据可以被then()接收，进行处理：

const data = 1  //为请求的参数

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(data)  //当请求成功时调用resolve，并将data进行传递
  },1000)
}).then((data) => {  //接收resolve传来的参数data
  data = data + 2  //对请求来的数据进行操作
  console.log('参数接收并修改为：' + data)
})

当异步请求失败时，会调用reject函数，该函数中的参数可以设置为一些错误信息，在Promise对象的末尾可以接promise.catch()函数，其中错误信息可以被catch()接收：

const data = 1  //为请求的参数

new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve(data)  //当请求成功时调用resolve，并将data进行传递

    reject('未请求到数据')  //当请求成功时调用reject，并将错误信息进行传递
  },1000)
}).then((data) => {  //接收resolve传来的参数data
  data = data + 2  //对请求来的数据进行操作
  console.log('参数接收并修改为：' + data)
}).catch((err) => {  //接收reject传来的参数（错误信息）
  console.log(err)  //可以对该参数进行操作
})

此外，promise.then()函数可以同时接收两个参数，即resolve传递的请求数据以及reject传递的错误信息，因此可以使用以下格式简写：

new Promise((*resolve*, *reject*) *=>* {}).then(*data* *=>* {}, *err* *=>* {})

const data = 1

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(data)
    reject('未请求到数据')
  }, 1000)
}).then(data => {
  data = data + 2
  console.log('参数接收并修改为：' + data)
}, err => {
  console.log(err)
})

Promise的链式调用

链式调用

无论是promise.then()函数还是promise.catch()函数，都可以返回一个Promise对象。基于此可以实现链式调用，以处理不同的异步请求。这便是Promise的优势，在实现层层嵌套的回调函数（请求）的同时又不失代码格式的整洁：

const data = 1  //初次请求的数据

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(data)  //第一次网络请求
    // reject('请求数据失败')
  }, 1000)
}).then((data2) => {  //接收上层resolve传来的数据（data）
  data2 = data2 + 1  //第一次处理请求
  console.log('处理第一次请求数据，将其改为：' + data2)

  return new Promise((resolve, reject) => {  //返回一个新的Promise对象
    setTimeout(() => {
      resolve(data2)  //第二次网络请求
      // reject('请求数据失败')
    }, 1000)
  })
}).then((data3) => {  //接收上层resolve传来的数据（data2）
  data3 = data3 + 1  //第二次处理请求
  console.log('处理第二次请求数据，将其改为：' + data3)

  return new Promise((resolve, reject) => {  //返回一个新的Promise对象
    setTimeout(() => {
      resolve(data3)  //第三次网络请求
      // reject('请求数据失败')
    }, 1000)
  })
}).then((data4) => {  //接收上层resolve传来的数据（data3）
  data4 = data4 + 1  //第三次处理请求
  console.log('处理第三次请求数据，将其改为：' + data4)
}).catch((err) => {
  console.log(err)
})

运行结果如下：

说明：可以在任意位置调用promise.catch()函数进行错误捕获，一旦在这函数之前的“链”中有异步请求错误，都会捕捉到这一信息。

简写一

new Promise(resolve => resolve(结果))可以简写：

const data = 1

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(data)
  }, 1000)
}).then((data2) => {
  data2 = data2 + 1
  console.log('处理第一次请求数据，将其改为：' + data2)
  return Promise.resolve(data2)
  // throw '请求异常'
}).then((data3) => {
  data3 = data3 + 1
  console.log('处理第二次请求数据，将其改为：' + data3)
  return Promise.resolve(data3)
  // throw '请求异常'
}).then((data4) => {
  data4 = data4 + 1
  console.log('处理第三次请求数据，将其改为：' + data4)
  // throw '请求异常'
}).catch((err) => {
  console.log(err)
})

说明：可以在新的请求后添加throw关键词，以将错误信息抛出，最后可以用promise.catch()函数进行捕获。

简写二

可以进一步把Promise.resolve()省略：

const data = 1

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(data)
  }, 1000)
}).then((data2) => {
  data2 = data2 + 1
  console.log('处理第一次请求数据，将其改为：' + data2)
  return data2
  // throw '请求异常'
}).then((data3) => {
  data3 = data3 + 1
  console.log('处理第二次请求数据，将其改为：' + data3)
  return data3
  // throw '请求异常'
}).then((data4) => {
  data4 = data4 + 1
  console.log('处理第三次请求数据，将其改为：' + data4)
  // throw '请求异常'
}).catch((err) => {
  console.log(err)
})