前端常见问题以及处理方式 - - - (十三) js中的 Promise

提示：前端查漏补缺，仅代表个人观点，不接受任何批评

---

一、Promise是什么？

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

• Promise 是 ES6 新增加的，一些旧的浏览器并不支持，例如苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。

---

二、Promise的介绍

1.基本实例

Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。

代码如下（示例）：

 //resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

通过回调里的 resolve(data) 将这个 promise 标记为 resolverd，然后进行下一步 then((data)=>{//do something})，resolve 里的参数就是你要传入 then 的数据。

---

2.Promise的方法:

(1) Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数：

• .then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，
• .catch() 则是设定 Promise 的异常处理序列，
• .finally() 是在 Promise 执行的最后一定会执行的序列。
• .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列.

(2) resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作.

(3) reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

注意以下两点：

• resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列；
• resolve 和 reject 并不能够使起始函数停止运行，所以别忘了 return。

---

3.关于Promise常见的问答

1. then、catch 和 finally 序列可以顺序颠倒，但不推荐。

2. then 块如何中断？

then 块默认会向下顺序执行，return 是不能中断的，如果想中断，可以通过 throw 来跳转至 catch 实现中断。

4. 除了 then 块以外，其它两种块能否多次使用？

可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。

5. Promise 不是一种将异步转换为同步的方法，Promise 是一种更良好的编程风格。

6. 什么时候适合用 Promise 而不是传统回调函数？

当需要多次顺序执行异步操作的时候。模拟一个场景，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。

7. 什么情况我们需要再写一个 then 而不是在当前的 then 接着编程？

• 当业务上又需要调用一个异步任务的时候，可以提前封装好，再调用。

---

总结

分享下个人常用的封装

• uni-app请求封装

const baseUrl = 'https://center.xxx.com/graphql' 
 
 // local 
// const baseUrl = 'http://192.168.1.5:xxxx/graphql' 
 
const request = (url = '', date = {}, type = 'POST', header = {
}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            method: type,
            url: baseUrl + url,
            data: date,
            header: {
				"Authorization": uni.getStorageSync('userInfo').token || ''
			},
            dataType: 'json',         
        }).then((response) => {
            setTimeout(function() {
                uni.hideLoading();
            }, 200);
            let [error, res] = response;        
            resolve(res.data);
        }).catch(error => {
            let [err, res] = error;
			uni.hideLoading();
            reject(err)
        })
    });
}
export default request

• Nuxt.js post请求封装 (axios)

import axios from 'axios'

export default function graphql(endpoint, date ,token) {
  if(token) {
    var headers = {
      'Content-Type': 'application/json',
      Authorization: localStorage.getItem("token"),
    }
  } else {
    var headers = {
      'Content-Type': 'application/json'
    }
  }
  return new Promise((resolve, reject) => {
    axios({
      url: endpoint,
      method: 'post',
      data:date,
      headers: headers
    }).then(resp => resolve(resp.data))
      .catch(reject)
  })
}