Promise异步编程
目录
一、Promise的含义
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise
对象。
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
promise翻译: 许诺;承诺;答应;保证;使很可能;预示
二、基本用法
ES6 规定,Promise
对象是一个构造函数,用来生成Promise
实例。
const baseFun = () => {
console.log(1)
const promise = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据',
},
msg: '成功',
})
}, 1000)
})
promise.then((res) => {
if (res.code === 200) {
setTitle(res.data.title)
}
})
}
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
三、reject的用法
then
方法可以接受两个回调函数作为参数。第一个回调函数是Promise
对象的状态变为resolved
时调用,第二个回调函数是Promise
对象的状态变为rejected
时调用。这两个函数都是可选的,不一定要提供。它们都接受Promise
对象传出的值作为参数。
//reject的用法
const baseRejectFun = () => {
const promise = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据',
},
msg: '失败',
})
}, 1000)
})
promise.then(
(res) => {
if (res.code === 200) {
setTitle(res.data.title)
}
},
(res) => {
if (res.code === 400) {
setTitle(res.data.title)
}
}
)
}
四、执行顺序
Promise 新建后就会立即执行。
//执行顺序
const baseOrderFun = () => {
const promise = new Promise(function (resolve, reject) {
console.log('promise')
resolve()
console.log('promise2')
})
promise.then((res) => {
console.log('resolved')
})
console.log('other')
}
Promise 新建后立即执行,所以首先输出的是Promise
。然后,then
方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved
最后输出。
五、项目中使用promise获取后端数据
//项目中使用promise获取后端数据
const baseApiFun = () => {
Api.h5.userGetInfo({}).then((res) => {
if (res.code === 200) {
setTitle(res.data.nickname)
}
})
六、catch的用法
Promise.prototype.catch()
方法是.then(null, rejection)
或.then(undefined, rejection)
的别名,用于指定发生错误时的回调函数。
//catch的用法
const baseCatchFun = () => {
const promise = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据',
},
msg: '失败',
})
}, 1000)
})
promise
.then((res) => {
if (res.code === 200) {
setTitle(res.data.title)
}
})
.catch((res) => {
if (res.code === 400) {
setTitle(res.data.title)
}
})
}
一般来说,不要在then()
方法里面定义 Reject 状态的回调函数(即then
的第二个参数),总是使用catch
方法。
七、finally的用法
finally()
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
//finally的用法
const baseFinallyFun = () => {
const promise = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据',
},
msg: '失败',
})
}, 1000)
})
promise
.then((res) => {
if (res.code === 200) {
setTitle(res.data.title)
}
})
.catch((res) => {
if (res.code === 400) {
setTitle(res.data.title)
}
}).finally(() => {
console.log('finally')
})
}
八、Promise.all()
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.all([p1, p2, p3]);
上面代码中,Promise.all()
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()
方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
//Promise.all()
const baseAllFun = () => {
const promise1 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据',
},
msg: '成功',
})
}, 1000)
})
const promise2 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据2',
},
msg: '成功2',
})
}, 1000)
})
const promiseAll = Promise.all([promise1, promise2])
promiseAll
.then((res) => {
console.log(res)
})
.catch((res) => {
if (res.code === 400) {
setTitle(res.data.title)
}
})
}
九、Promise.all()有一个是失败
//Promise.all()有一个是失败
const baseAllWithRejectFun = () => {
const promise1 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据',
},
msg: '失败',
})
}, 1000)
})
const promise2 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据2',
},
msg: '失败2',
})
}, 1000)
})
const promiseAll = Promise.all([promise1, promise2])
promiseAll
.then((res) => {
console.log(res)
})
.catch((res) => {
console.log('catch', res)
})
}
十、Promise.race()全部是成功
Promise.race()
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
const p = Promise.race([p1, p2, p3]);
上面代码中,只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
const baseRaceFun = () => {
const promise1 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据',
},
msg: '成功',
})
}, 5000)
})
const promise2 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据2',
},
msg: '成功2',
})
}, 1000)
})
const promiseRace = Promise.race([promise1, promise2])
promiseRace
.then((res) => {
console.log(res)
})
.catch((res) => {
console.log(res)
})
}
十一、Promise.race()有一个是失败
//Promise.race()有一个是失败
const baseRaceWithRejectFun = () => {
const promise1 = new Promise(function (resolve, reject) {
setTimeout(() => {
resolve({
code: 200,
data: {
title: '通过resolve返回的数据',
},
msg: '成功',
})
}, 5000)
})
const promise2 = new Promise(function (resolve, reject) {
setTimeout(() => {
reject({
code: 400,
data: {
title: '通过reject返回的数据2',
},
msg: '失败2',
})
}, 1000)
})
const promiseRace = Promise.race([promise1, promise2])
promiseRace
.then((res) => {
console.log(res)
})
.catch((res) => {
console.log('catch', res)
})
}
十二、Promise.resolve()
//将现有对象转为 Promise 对象
let promise = Promise.resolve(1)
promise.then((res) => {
console.log(res) //1
})
十三、Promise.reject()
//将现有对象转为 Promise 对象
let promise = Promise.reject(1)
promise
.then((res) => {})
.catch((res) => {
console.log('catch', res) //catch 1
})
十四、promise.try()
处于提案阶段,还没有实现
javascript - Promise.try is not a function - SegmentFault 思否
十五、Promise 封装ajax
XMLHttpRequest
(XHR)对象用于与服务器交互
XMLHttpRequest.open() 方法初始化一个新创建的请求
XMLHttpRequest.send()
方法用于发送 HTTP 请求
当一个XMLHttpRequest请求完成的时候会触发load
事件
XMLHttpRequest - Web API 接口参考 | MDN
const xhr = new XMLHttpRequest()
xhr.open('post', 'http://yuying-api.xutongbao.top/api/light/user/captcha')
xhr.send()
xhr.addEventListener('load', (e) => {
let res = JSON.parse(e.target.response)
console.log(res)
if (res.code === 200) {
document.getElementById('img').innerHTML = res.data.captcha
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="img"></div>
<script>
const ajax = ({ method = 'get', url }) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open(method, url)
xhr.send()
xhr.addEventListener('load', (e) => {
let res = JSON.parse(e.target.response)
resolve(res)
})
})
}
ajax({
method: 'post',
url: 'http://yuying-api.xutongbao.top/api/light/user/captcha',
}).then((res) => {
console.log(res)
if (res.code === 200) {
document.getElementById('img').innerHTML = res.data.captcha
}
})
</script>
</body>
</html>
开源项目地址: