目录
1.几个关键问题
2. async函数
3. await表达式
4.async与await实践结合
5.async与await实践结合——发送Ajax请求获取信息
1.几个关键问题
在promise封装之前做准备
<script>
let p = new Promise((resolve, reject) => {
//三种方式promise状态最开始是pending
//1. resolve 函数
// resolve('ok'); // pending => fulfilled/resolved
//2. reject 函数
// reject("error");// pending => rejected
//3. 抛出错误
// throw '出问题了';
});
console.log(p);
</script>
能否执行多个回调：then指定回调：题目的意思：如果我们指定then方法为一个promise指定多个回调，这些回调是不是都会被执行
答案：当这个promise对象状态在改变之后，对应的回调函数它们都会调用
<script>
let p = new Promise((resolve, reject) => {
//调用了resolve说明是成功的，底下的两个回调都会执行，不调的话一直是pending状态，底下两个回调也不会执行
resolve('OK');
});
///指定回调 - 1
p.then(value => {
console.log(value);
});
//指定回调 - 2
p.then(value => {
alert(value);
});
</script>
改变promise状态可以用resolve，reject，throw；指定回调函数用then或者catch
（2）在执行器中直接调用 resolve()/reject()是同步任务
<script>
let p = new Promise((resolve, reject) => {
//异步居多
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
console.log(value);
},reason=>{
})
</script>
<script>
let p = new Promise((resolve, reject) => {
resolve('ok');
});
//执行 then 方法，
//promise.then()返回的新 promise 的结果状态由 then()指定的回调函数执行的结果决定
let result = p.then(value => {
// console.log(value);
//1. 抛出错误
// throw '出了问题';
//2. 返回结果是非 Promise 类型的对象，状态是成功的
// return 521;
//3. 返回结果是 Promise 对象
// return new Promise((resolve, reject) => {
//此 promise 的结果就会成为新 promise 的结果失败或成功success/error，result结果就是此promise结果
// // resolve('success');
// reject('error');
// });
}, reason => {
console.warn(reason);
});
console.log(result);
</script>
<script>
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
return new Promise((resolve, reject) => {
resolve("success");
});
}).then(value => {
console.log(value);//success，拿到上面的
}).then(value => {
//then的返回结果是promise
//此promise状态由它指定的回调函数的返回值决定，这个函数返回值没写就是undefined
//undefined也不是promise类型
//，所以这个then方法返回的结果就是一个成功的promise，值为undefined
console.log(value);//undefined
})
</script>
<script>
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
// reject('Err');
}, 1000);
});
//只有resolve了底下的then才能调只写了value
p.then(value => {
// console.log(111);
throw '失败啦!';
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
//throw '失败啦!';这个错误是由最终的catch方法处理的
console.warn(reason);
});
</script>
<script>
let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('OK');
}, 1000);
});
p.then(value => {
console.log(111);
//有且只有一个方式
//在回调函数中返回一个 pendding 状态的 promise 对象
//后续状态就都不能执行了，状态没有改变
return new Promise(() => {});
}).then(value => {
console.log(222);
}).then(value => {
console.log(333);
}).catch(reason => {
console.warn(reason);
});
</script>2. async函数
<script>
//async函数的返回值为 promise 对象
async function main(){
//1. 如果返回值是一个非Promise类型的数据，只要不是Promise类型的对象，
//那结果就是成功的promise对象，结果值为return的结果
// return 521;
//2. 如果返回的是一个Promise对象
// return new Promise((resolve, reject) => {
// // resolve('OK');main函数的返回结果就是一个成功的promise对象
// reject('Error');
// });
//3. 抛出异常，返回结果是一个失败的promise对象，值是"Oh NO"
throw "Oh NO";
}
//调用main
let result = main();
console.log(result);
</script>3. await表达式
其他值指的是数字，字符串，布尔类型等等
主要是对promise成功的结果进行一个获取，如果失败的就用try..catch..获取
注意：
<script>
async function main(){
let p = new Promise((resolve, reject) => {
// resolve('OK');
reject('Error');
})
//1. 右侧为promise的情况
// let res = await p; OK
//2. 右侧为其他类型的数据
// let res2 = await 20; 20
//3. 如果promise是失败的状态
try{
let res3 = await p;
}catch(e){
//拿到失败的结果
console.log(e);
}
}
main();
</script>4.async与await实践结合
/**
* resource 1.html 2.html 3.html 文件内容
* //拼接进行输出
*/
const fs = require('fs');
//util中的方法将API转化成promise形态的函数
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);
//1.回调函数的方式实现
// fs.readFile('./resource/1.html', (err, data1) => {
// if(err) throw err;有问题就抛出错误，没有问题就拿到1.html
// fs.readFile('./resource/2.html', (err, data2) => {
// if(err) throw err;
// fs.readFile('./resource/3.html', (err, data3) => {
// if(err) throw err;
// console.log(data1 + data2 + data3);
// });
// });
// });
//2.async 与 await实现
async function main(){
try{
//读取第一个文件的内容，await后面放的是promise对象，并且可以获得其成功的结果
let data1 = await mineReadFile('./resource/1x.html');
let data2 = await mineReadFile('./resource/2.html');
let data3 = await mineReadFile('./resource/3.html');
console.log(data1 + data2 + data3);
}catch(e){
console.log(e.code);
//出错用try-catch包裹
}
}
main();5.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>async与await结合发送AJAX</title>
</head>
<body>
<!-- 点击按钮发送Ajax请求获取信息 -->
<button id="btn">点击获取段子</button>
<script>
//axios
function sendAJAX(url){
return new Promise((resolve, reject) => {
const 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);
}
}
}
});
}
//段子接口地址 https://api.apiopen.top/getJoke
let btn = document.querySelector('#btn');//获取按钮
//绑定点击事件
btn.addEventListener('click',async function(){
//获取段子信息
let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
console.log(duanzi);
});
</script>
</body>
</html>
