关于javascript:我在乐字节学习前端的第七天Promise学习

一、什么是Promise？

Promise 是 ES6 引入的进行异步编程的新的解决方案。备注：旧的是单纯的回调函数

从语法上来说：它就是一个构造函数，能够封装异步的工作，并且对后果进行解决。从性能上来说：Promise对象用来封装一个异步操作并能够获取其胜利/失败 的后果值。

Promise最大的益处在于能够解决回调天堂的问题，并且它在指定回调与错误处理这块要更加的灵便与不便，而且Promise在古代我的项目当中，无论是Web还是App的我的项目当中都利用的非常宽泛，无论是前端还是后端都能够看到它的身影，同时它也是当初面试的高频题目。

二、Promise 初体验

2.1 在nodejs环境下读取文件内容

需要：读取当前目录下的 file 文件夹下的 content.txt 的内容并输入。

// 引入fs模块
const fs = require('fs')

// 回调函数模式
// fs.readFile('./file/content.txt', (err, data) => {
// // 如果谬误,则抛出谬误
// if(err) throw err

// console.log(data.toString());
// })

// Promise旧式
let p = new Promise((resolve, reject) => {
fs.readFile('./file/content.txt', (err, data) => {
if (err) reject(err);
resolve(data);
})
})

p.then(value =>{
console.log(value.toString());
},reason =>{
console.log(reason);
})

output:

Hello Promise,This is Content
1

2.2 封装 AJAX

需要：应用Promise封装AJAX并读取接口数据并输入接口地址： https://api.apiopen.top/getJoke

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>
<body>
<div class="container">
<h2 class="page-header">Promise 封装 AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送AJAX</button>
</div>
<script>

const btn = document.querySelector('#btn')
btn.onclick = function () {
const p = new Promise((resolve, reject) => {
xhr = new XMLHttpRequest()
xhr.open('GET', 'https://api.apiopen.top/getJoke')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
p.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
})

}
</script>
</body>
</html>

三、怎么应用 Promise?

在理解怎么应用 Promise之前，咱们先来看看 Promise实例对象的两个属性： 「PromiseState」和「PromiseResult」

3.1 Promise 的状态

每一个实例对象都领有一个属性叫做 「PromiseState」，这个属性有三个值，别离是：

pending 「未决定的」
resolved / fullfilled 「胜利」
rejected 「失败」

状态的扭转

pending变为 resolved
pending变为 rejected

阐明：只有这2种，且一个 promise对象只能扭转一次，扭转后不可批改无论变为胜利还是失败，都会有一个后果数据胜利的后果数据个别称为 value，失败的后果数据个别称为 reason

3.2 Promise 的后果

每一个实例对象都领有一个属性叫做 「PromiseResult」，它用于保留实例对象(异步工作) 「胜利或失败」 的后果。

只有 resolve和reject 能够批改该属性的值。

四、 Promise 的 API

4.1 resolve 办法

如果传入的参数为非 Promise类型的对象，则返回的后果为胜利 promise对象如果传入的参数为 Promise对象，则参数的后果决定了 resolve的后果

const p1 = Promise.resolve(520)
console.log(p1); // PromiseState => fulfilled

const p2 = Promise.resolve(new Promise((resolve, reject) => {
reject('111')
}))

// 此处外部有一个失败的回调,然而没有解决.所以会产生报错
console.log(p2); // PromiseState => rejected 报错:Uncaught (in promise) 111

p2.catch(reason => {
console.log(reason); // 111
})

4.2 reject 办法

永远返回一个 rejected「失败」的 Promise 对象。

// const p = Promise.reject(521)
// 留神此处会产生一个报错,起因是外部有一个失败的Promise然而没有对应的回调来解决它
// console.log(p); // PromiseState rejected

const p2 = Promise.reject(new Promise((resolve, reject) => {
resolve('123')
}))
console.log(p2); // PromiseState rejected
p2.then(value =>{
console.log(value);
},reason =>{
console.log(reason); // 失败的后果是一个 Promise对象,这个Promise对象的状态为胜利
})

4.3 all 办法

语法：

Promise.all(Array) // Array 一组Promise对象
1

阐明：返回一个新的 Promise，只有所有的 Promise都胜利才胜利，只有有一个失败了就间接失败

第一种状况，全部都是 resolved:

const p1 = new Promise((resolve, reject) => {
resolve('ok')
})
const p2 = Promise.resolve('success')
const p3 = Promise.resolve('Oh Yeah')

const result = Promise.all([p1, p2, p3])

console.log('result: ', result);
// PromiseState "fulfilled"
// PromiseResult ['ok','success','Oh Yeah']

第二种状况，有一个是 rejected:

const p1 = new Promise((resolve, reject) => {
resolve('ok')
})
const p2 = Promise.reject('error info')
const p3 = Promise.resolve('Oh Yeah')

const result = Promise.all([p1, p2, p3])

console.log('result: ', result);
// PromiseState "rejected"
// PromiseResult "error info"

4.4 race办法

race函数返回一个 Promise，它能够是实现（ resolved），也能够是失败（rejected），这要取决于第一个实现的是哪个。

第一种状况，先实现的是 「P1 => resolved」 :

const p1 = new Promise((resolve, reject) => {
resolve('ok')
})
const p2 = Promise.reject('error')
const p3 = Promise.resolve('Oh Yeah')

const result = Promise.race([p1, p2, p3])
console.log(result); // PromiseState:"fulfilled" PromiseResult:"ok"

第二种状况，先实现的是 「P2 => rejected」:

//第一钟测试形式：
//留神：这里扭转的是race办法参数的地位
const p1 = new Promise((resolve, reject) => {
resolve('ok')
})
const p2 = Promise.reject('error info')
const p3 = Promise.resolve('Oh Yeah')

const result = Promise.race([p2, p1, p3])
console.log(result); // PromiseState:"rejected" PromiseResult:"error info"

//第二钟测试形式：
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok')
}, 1000);
})
const p2 = Promise.reject('error info')
const p3 = Promise.resolve('Oh Yeah')

const result = Promise.race([p1, p2, p3])
console.log(result); // PromiseState:"rejected" PromiseResult:"error info"

4.5 实例对象的 then办法

then 办法领有返回值，返回值是一个 Promise 对象。状态是由回调函数的执行后果来决定.

返回后果是非 Primose 类型,状态为胜利，返回值为then办法中的返回值(下方例子中的 123即为返回值)，办法中如果没有return 则为 undefined
如果返回值是一个 Promise 对象，那么外部 Promise 对象返回的状态和值决定内部 then 办法的状态和值
如果抛出谬误，则then办法状态为 rejected,值为抛出的值

提醒： then办法的返回值与 async 润饰的函数的返回值截然不同

非凡状况：

then办法冀望的参数是一个函数，如果不是函数则会产生 Promise穿透（值穿透），状态为上一个Promise的状态，值为上一个 Promise的值。

// 非凡状况:
const p = new Promise((resolve, reject) => {
resolve('ok')
// reject('error')
})
const result = p.then(console.log(123))
console.log(result); // PromiseState: "fulfilled" PromiseResult: "ok"
1234567

略微加点难度：

Promise.resolve('foo')
.then(Promise.resolve('bar'))
.then(function(result){
console.log(result)
})

当然，输入的后果为foo。问其起因，答案如题——Promise值穿透解释：.then 或者 .catch 的参数冀望是函数，传入非函数则会产生值穿透。

再来一道：

Promise.resolve(1)
.then(function(){return 2})
.then(Promise.resolve(3))
.then(console.log)

output: 2 解释：Promise.resolve(3) 不是函数，产生了值穿透

持续来：

Promise.resolve(1)
.then(function(){return 2})
.then(function(){return Promise.resolve(3)})
.then(console.log)

output:3

五、async 和 await

5.1 async

应用 async 关键字润饰的函数返回值永远为 Promise 对象，这个Prmose对象的状态与then办法返回值的状态都是利用的同一种规定。

一个最简略的例子：

async function main(){

}
let result = main()
console.log(result); // "fulfilled" "undefined"

5.2 await

await 右侧的表达式个别为 promise对象，但也能够是其它的

右侧没有Promise的状况: 间接将此值作为 await的返回值
右侧为胜利的 Promise: 返回的是 promise胜利的值
右侧为失败的 Promise: 抛出异样,须要应用 try catch 捕捉解决

留神： await 必须写在 async函数中，但 async函数中能够没有 await

async function main() {
// 1.右侧没有Promise的状况: 间接将此值作为 await的返回值
let result = await 'str'
console.log(result); // result => str info => fulfilled str
return result

// 2.右侧为胜利的 Promise: 返回的是 promise胜利的值
// let p1 = new Promise((resolve, reject) => {
// resolve('ok')
// })
// let result1 = await p1
// console.log(result1); // result => ok info => fulfilled ok
// return result1

// 3.右侧为失败的 Promise: 抛出异样,须要应用 try catch 捕捉解决
// let p2 = new Promise((resolve, reject) => {
// reject('error')
// })
// try {
// let result2 = await p2
// } catch (e) {
// console.log(e); // e => error info => fulfilled error
// return e
// }
}
const info = main()
console.log(info);

六、async与await 联合发送 AJAX

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.css">
</head>

<body>
<div class="container">
<h2 class="page-header">async与await封装AJAX操作</h2>
<button class="btn btn-primary" id="btn">点击发送AJAX</button>
</div>
<script>
function sendAJAX(url) {
return new Promise((resolve, reject) => {
xhr = new XMLHttpRequest()
xhr.responseType = 'json'
xhr.open('GET', url)
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(xhr.status)
}
}
}
})
}

const btn = document.querySelector('#btn')
btn.addEventListener('click', async function () {
let result = await sendAJAX('https://api.apiopen.top/getJoke')
console.log(result);
})
</script>
</body>
</html>