update: Promise
This commit is contained in:
parent
cb804e2a3e
commit
acf4d69267
@ -108,6 +108,7 @@ $.ajax({
|
|||||||
在 ES5 中,当进行多层嵌套回调时,会导致代码层次过多,很难进行后续维护和二次开发;而且会导致**回调地狱**的问题。ES6 中的 Promise 就可以解决这两个问题。
|
在 ES5 中,当进行多层嵌套回调时,会导致代码层次过多,很难进行后续维护和二次开发;而且会导致**回调地狱**的问题。ES6 中的 Promise 就可以解决这两个问题。
|
||||||
|
|
||||||
当然, Promise 的更强大功能,不止于此。我们来一探究竟。
|
当然, Promise 的更强大功能,不止于此。我们来一探究竟。
|
||||||
|
|
||||||
### Promise 的介绍和优点
|
### Promise 的介绍和优点
|
||||||
|
|
||||||
ES6 中的 Promise 是异步编程的一种方案。从语法上讲,Promise 是一个对象,它可以获取异步操作的消息。
|
ES6 中的 Promise 是异步编程的一种方案。从语法上讲,Promise 是一个对象,它可以获取异步操作的消息。
|
||||||
@ -355,6 +356,28 @@ promise.then(
|
|||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**几点补充**:
|
||||||
|
|
||||||
|
(1)Promise 的状态一旦改变,就不能再变。
|
||||||
|
|
||||||
|
(2)Promise 的状态改变,是不可逆的。
|
||||||
|
|
||||||
|
为了解释这两点,我们来看个例子:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const p = new Promise((resolve, reject) => {
|
||||||
|
resolve(1); // 代码执行到这里时, promise状态是 fulfilled
|
||||||
|
reject(2); // 尝试修改状态为 rejected,是不行的
|
||||||
|
});
|
||||||
|
|
||||||
|
p.then((res) => {
|
||||||
|
console.log(res);
|
||||||
|
}).catch((err) => {
|
||||||
|
console.log(err);
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码的打印结果是1,而不是2。
|
||||||
|
|
||||||
## 如何封装异步操作为 promise
|
## 如何封装异步操作为 promise
|
||||||
|
|
||||||
### Promise 封装异步任务
|
### Promise 封装异步任务
|
||||||
@ -478,10 +501,10 @@ const request = require('request');
|
|||||||
// Promise 定义接口
|
// Promise 定义接口
|
||||||
function request1() {
|
function request1() {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
request('https://www.baidu.com', (response) => {
|
request('https://www.baidu.com', res => {
|
||||||
if (response.retCode == 200) {
|
if (res.retCode == 200) {
|
||||||
// 这里的 response 是接口1的返回结果
|
// 这里的 res 是接口1的返回结果
|
||||||
resolve('request1 success' + response);
|
resolve('request1 success' + res);
|
||||||
} else {
|
} else {
|
||||||
reject('接口请求失败');
|
reject('接口请求失败');
|
||||||
}
|
}
|
||||||
@ -490,10 +513,10 @@ function request1() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
request1()
|
request1()
|
||||||
.then((res1) => {
|
.then((res) => {
|
||||||
// 接口1请求成功后,打印接口1的返回结果
|
// 接口1请求成功后,打印接口1的返回结果
|
||||||
console.log(res1);
|
console.log(res);
|
||||||
return request2();
|
// return request2();
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
// 从 reject 获取异常结果
|
// 从 reject 获取异常结果
|
||||||
|
@ -25,10 +25,10 @@
|
|||||||
// Promise 封装接口1
|
// Promise 封装接口1
|
||||||
const request1 = function () {
|
const request1 = function () {
|
||||||
const promise = new Promise((resolve, reject) => {
|
const promise = new Promise((resolve, reject) => {
|
||||||
request('https://www.baidu.com', function (response) {
|
request('https://www.baidu.com', res => {
|
||||||
if (response.retCode == 200) {
|
if (res.retCode == 200) {
|
||||||
// 这里的 response 是接口1的返回结果
|
// 这里的 res 是接口1的返回结果
|
||||||
resolve('request1 success' + response);
|
resolve('request1 success' + res);
|
||||||
} else {
|
} else {
|
||||||
reject('接口请求失败');
|
reject('接口请求失败');
|
||||||
}
|
}
|
||||||
@ -41,10 +41,10 @@
|
|||||||
// Promise 封装接口2
|
// Promise 封装接口2
|
||||||
const request2 = function () {
|
const request2 = function () {
|
||||||
const promise = new Promise((resolve, reject) => {
|
const promise = new Promise((resolve, reject) => {
|
||||||
request('https://www.jd.com', function (response) {
|
request('https://www.jd.com', res => {
|
||||||
if (response.retCode == 200) {
|
if (res.retCode == 200) {
|
||||||
// 这里的 response 是接口2的返回结果
|
// 这里的 res 是接口2的返回结果
|
||||||
resolve('request2 success' + response);
|
resolve('request2 success' + res);
|
||||||
} else {
|
} else {
|
||||||
reject('接口请求失败');
|
reject('接口请求失败');
|
||||||
}
|
}
|
||||||
@ -57,10 +57,10 @@
|
|||||||
// Promise 封装接口3
|
// Promise 封装接口3
|
||||||
const request3 = function () {
|
const request3 = function () {
|
||||||
const promise = new Promise((resolve, reject) => {
|
const promise = new Promise((resolve, reject) => {
|
||||||
request('https://www.taobao.com', function (response) {
|
request('https://www.taobao.com', res => {
|
||||||
if (response.retCode == 200) {
|
if (res.retCode == 200) {
|
||||||
// 这里的 response 是接口3的返回结果
|
// 这里的 res 是接口3的返回结果
|
||||||
resolve('request3 success' + response);
|
resolve('request3 success' + res);
|
||||||
} else {
|
} else {
|
||||||
reject('接口请求失败');
|
reject('接口请求失败');
|
||||||
}
|
}
|
||||||
|
@ -177,6 +177,11 @@ const obj = {
|
|||||||
obj.name = 'vae'; // 对象里的 name 属性可以被修改
|
obj.name = 'vae'; // 对象里的 name 属性可以被修改
|
||||||
```
|
```
|
||||||
|
|
||||||
|
因为 变量名 obj 是保存在**栈内存**中的,它代表的是对象的引用地址,它是基本数据类型,无法被修改。但是 obj 里面的内容是保存在**堆内存**中的,它是引用数据类型,可以被修改。
|
||||||
|
|
||||||
|
**总结**:用 const 声明的常量,它所声明的
|
||||||
|
|
||||||
|
|
||||||
## 传值和传址的区别
|
## 传值和传址的区别
|
||||||
|
|
||||||
详见《JavaScript基础/对象简介.md》。
|
详见《JavaScript基础/对象简介.md》。
|
||||||
|
20
07-JavaScript进阶/Promise的一些题目.md
Normal file
20
07-JavaScript进阶/Promise的一些题目.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
## Promise 的执行顺序
|
||||||
|
|
||||||
|
题目 1:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const p = new Promise((resolve, reject) => {
|
||||||
|
console.log(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(2);
|
||||||
|
```
|
||||||
|
|
||||||
|
打印结果:
|
||||||
|
|
||||||
|
```
|
||||||
|
1
|
||||||
|
2
|
||||||
|
```
|
||||||
|
|
||||||
|
我们需要注意的是:Promise里的代码整体,其实是同步任务,会立即执行。
|
Loading…
Reference in New Issue
Block a user