webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: Node.js 环境配置

Browse Source
This commit is contained in:
qianguyihao
2020-04-09 15:24:26 +08:00
parent 5e3679a89c
commit 83c641b22c
5 changed files with 269 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
10-ES6/07-ES6：Promise入门详解.md
View File

@@ -103,6 +103,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
</html>
```
上方代码中，当从接口返回的数据`data.retCode`的值不同时，可能会走 resolve，也可能会走 reject，这个由你自己的业务决定。
## promise对象的3个状态（了解即可）
@@ -156,7 +157,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
)
```
## 基于 Promise 处理 多次 Ajax 请求（链式调用）【重要】
## 基于 Promise 处理多次 Ajax 请求（链式调用）【重要】
实际开发中，我们经常需要同时请求多个接口。比如说：在请求完`接口1`的数据`data1`之后，需要根据`data1`的数据，继续请求接口2，获取`data2`；然后根据`data2`的数据，继续请求接口3。
@@ -178,12 +179,13 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
<script>
const request = require('request');
// Promise 封装接口
// Promise 封装接口1
const request1 = function() {
const promise = new Promise(resolve => {
request('https://www.baidu.com', function(response) {
if (response.retCode == 200) {
resolve('request1 success');
// 这里的 response 是接口1的返回结果
resolve('request1 success'+ response);
} else {
reject('接口请求失败');
}
@@ -193,11 +195,14 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
return promise;
};
// Promise 封装接口2
const request2 = function() {
const promise = new Promise(resolve => {
request('https://www.jd.com', function(response) {
if (response.retCode == 200) {
resolve('request2 success');
// 这里的 response 是接口2的返回结果
resolve('request2 success'+ response);
} else {
reject('接口请求失败');
}
@@ -207,11 +212,14 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
return promise;
};
// Promise 封装接口3
const request3 = function() {
const promise = new Promise(resolve => {
request('https://www.taobao.com', function(response) {
if (response.retCode == 200) {
resolve('request3 success');
// 这里的 response 是接口3的返回结果
resolve('request3 success'+ response);
} else {
reject('接口请求失败');
}
@@ -224,14 +232,17 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
// 先发起request1，等resolve后再发起request2；紧接着，等 request2有了 resolve之后，再发起 request3
request1()
.then(data => {
// 接口1请求成功后，打印接口1的返回结果
console.log(data);
return request2();
})
.then(data => {
// 接口2请求成功后，打印接口1的返回结果
console.log(data);
return request3();
})
.then(data => {
// 接口3请求成功后，打印接口1的返回结果
console.log(data);
});
</script>

37
10-ES6/08-ES6：async函数详解.md
View File

@@ -1,37 +0,0 @@
## async函数（异步函数）
### 概述
> async 函数是在 ES2017 引入的。
概念：真正意义上去解决异步回调的问题，同步流程表达异步操作。
本质： Generator 的语法糖。
async比之前的 Promise、Generator要好用一些。
语法：
```javascript
async function foo() {
await 异步操作;
await 异步操作；
}
```
我们在普通的函数前面加上 async 关键字，就成了 async 函数。
### async、Promise、Generator的对比（async的特点）
1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行。
2、async返回的总是Promise对象，可以用then方法进行下一步操作。
3、async取代Generator函数的星号*，await取代Generator的yield。
4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用。

66
10-ES6/08-ES7：async函数详解.md Normal file
View File

@@ -0,0 +1,66 @@
> 备注： async/await 的内容还有待完善。
## async/await （异步函数）概述
async/await 是在 ES7 中引入的新语法，可以更加方便地进行异步操作。
本质： Generator 的语法糖。
- async 的返回值是 Promise 实例对象。
- await 可以得到异步结果。
我们在普通的函数前面加上 async 关键字，就成了 async 函数。
## async/await 的基本用法
async 后面可以跟一个 Promise 实例对象。代码举例如下：
```javascript
const request1 = function() {
const promise = new Promise(resolve => {
request('https://www.baidu.com', function(response) {
if (response.retCode == 200) {
// 这里的 response 是接口1的返回结果
resolve('request1 success'+ response);
} else {
reject('接口请求失败');
}
});
});
return promise;
};
async function queryData() {
const response = await request1();
});
return response;
}
queryData().then(data => {
console.log(data);
});
```
## 基于 async/await 处理多次 Ajax 请求【重要】
实际开发中，现在有三个网络请求，请求2必须依赖请求1的结果，请求3必须依赖请求2的结果，如果按照往常的写法，会有三层回调，会陷入“回调地狱”。
这种场景其实就是接口的多层嵌套调用。之前学过 Promise，它可以把原本的**多层嵌套调用**改进为**链式调用**。
而今天要学习的 async/await ，可以把原本的“多层嵌套调用”改成类似于同步的写法，非常优雅。
代码举例：
暂略。
## 参考链接
- [js async await 终极异步解决方案](https://www.cnblogs.com/CandyManPing/p/9384104.html)
- [理解 JavaScript 的 async/await](https://segmentfault.com/a/1190000007535316)