提示：前端查漏补缺，仅代表个人观点，不接受任何批评
文章目录
- 一、Promise是什么？
- 二、Promise的介绍
- 1.基本实例
- 2.Promise的方法:
- 3.关于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常见的问答
then、catch 和 finally序列可以顺序颠倒，但不推荐。then 块如何中断？
then 块默认会向下顺序执行，return 是不能中断的，如果想中断，可以通过 throw 来跳转至 catch 实现中断。
除了 then 块以外，其它两种块能否多次使用？
可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。
- Promise 不是一种将异步转换为同步的方法，Promise 是一种更良好的编程风格。
什么时候适合用 Promise 而不是传统回调函数？
当需要多次顺序执行异步操作的时候。模拟一个场景，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。
什么情况我们需要再写一个 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.jspost请求封装 (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)
})
}
