Skip to content

Commit

Permalink
update: Node.js 环境配置
Browse files Browse the repository at this point in the history
  • Loading branch information
qianguyihao committed Apr 9, 2020
1 parent b7fba92 commit 204cbe4
Show file tree
Hide file tree
Showing 5 changed files with 263 additions and 233 deletions.
21 changes: 16 additions & 5 deletions 10-ES6/07-ES6:Promise入门详解.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
</html>

```

上方代码中,当从接口返回的数据`data.retCode`的值不同时,可能会走 resolve,也可能会走 reject,这个由你自己的业务决定。

## promise对象的3个状态(了解即可)
Expand Down Expand Up @@ -156,7 +157,7 @@ Promise对象, 可以**将异步操作以同步的流程表达出来**。使用
)
```

## 基于 Promise 处理 多次 Ajax 请求(链式调用)【重要】
## 基于 Promise 处理多次 Ajax 请求(链式调用)【重要】

实际开发中,我们经常需要同时请求多个接口。比如说:在请求完`接口1`的数据`data1`之后,需要根据`data1`的数据,继续请求接口2,获取`data2`;然后根据`data2`的数据,继续请求接口3。

Expand All @@ -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('接口请求失败');
}
Expand All @@ -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('接口请求失败');
}
Expand All @@ -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('接口请求失败');
}
Expand All @@ -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>
Expand Down
37 changes: 0 additions & 37 deletions 10-ES6/08-ES6:async函数详解.md

This file was deleted.

66 changes: 66 additions & 0 deletions 10-ES6/08-ES7:async函数详解.md
Original file line number Diff line number Diff line change
@@ -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)

Loading

0 comments on commit 204cbe4

Please sign in to comment.