update: Promise的静态方法
This commit is contained in:
qianguyihao
parent
63b59a4d5f
commit
83891011d0
@ -448,7 +448,15 @@ promiseB
|
||||
|
||||
## 处理 reject 失败状态的两种写法
|
||||
|
||||
我们有两种写法可以捕获并处理 reject 异常状态。这两种写法的代码举例如下：
|
||||
我们有两种写法可以捕获并处理 reject 异常状态：
|
||||
|
||||
- 写法 1：通过 catch 方法捕获 状态变为已 reject 时的 promise
|
||||
|
||||
- 写法 2：then 可以传两个参数，第⼀个参数为 resolve 后执⾏，第⼆个参数为 reject 后执⾏。
|
||||
|
||||
### 代码格式
|
||||
|
||||
这两种写法的**代码格式**如下：
|
||||
|
||||
```js
|
||||
// 第一步：model层的接口封装
|
||||
@ -498,6 +506,57 @@ try-catch 主要用于捕获异常，注意，这里的异常是指**同步**函
|
||||
|
||||
（2）写法 1 中，`promiseA().then().catch()`和`promiseA().catch().then()`区别在于：前者可以捕获到 `then` 里面的异常，后者不可以。
|
||||
|
||||
### 代码举例
|
||||
|
||||
这两种写法的**代码举例**如下：
|
||||
|
||||
```js
|
||||
function promiseA() {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 这里做异步任务（比如 ajax 请求接口，或者定时器）
|
||||
...
|
||||
...
|
||||
});
|
||||
}
|
||||
|
||||
// 写法1
|
||||
promiseB()
|
||||
.then((res) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(err);
|
||||
})
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
|
||||
|
||||
// 写法 2：（和写法 1 等价）
|
||||
promiseB()
|
||||
.then(
|
||||
(res) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(res);
|
||||
},
|
||||
(err) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(err);
|
||||
}
|
||||
)
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
```
|
||||
|
||||
**代码解释**：写法 1 和写法 2 的作用是完全等价的。只不过，写法 2 是把 catch 里面的代码作为 then 里面的第二个参数而已。
|
||||
|
||||
## 总结
|
||||
|
||||
了解这些内容之后， 你已经对 Promise 有了基本了解。下一篇文章，我们来讲一讲 Promise 在实战开发的常见用法。
|
||||
|
||||
@ -99,7 +99,7 @@ new Promise((resolve, reject) => {
|
||||
|
||||
怎么个封装法呢？上面的代码中，每次在 return 一个 promise 的时候，只是 url 地址不一样，其他的代码是一样的。所以我们可以把重复的代码封装成函数。写法如下。
|
||||
|
||||
### Promise 链式调用（封装写法）
|
||||
### Promise 链式调用（封装一个接口）
|
||||
|
||||
针对同一个接口的多次嵌套调用，采用 promise 封装后的写法如下：
|
||||
|
||||
@ -162,7 +162,7 @@ getPromise('a.json')
|
||||
|
||||
但是，真正在实战中，我们往往需要嵌套请求**多个不同的接口**，要处理的 resolve 和 reject 的时机往往是不同的，所以需要分开封装不同的 Promise 实例，这在实战开发中更为常见。代码应该是像下面这样写。
|
||||
|
||||
### Promise 链式调用（封装写法，多个接口）
|
||||
### Promise 链式调用（封装多个接口）
|
||||
|
||||
针对多个不同接口的嵌套调用，采用 promise 封装后的写法如下：
|
||||
|
||||
@ -322,7 +322,7 @@ getPromise('a.json')
|
||||
|
||||
### 统一处理 reject
|
||||
|
||||
针对 a、b、c 这三个请求，不管哪个请求失败，我就希望做统一处理。这种代码要怎么写呢?我们可以在最后面写一个 catch。
|
||||
针对 a、b、c 这三个请求，不管哪个请求失败，我都希望做统一处理。这种代码要怎么写呢?我们可以在最后面写一个 catch。
|
||||
|
||||
代码举例如下：
|
||||
|
||||
@ -347,11 +347,11 @@ getPromise('a.json')
|
||||
});
|
||||
```
|
||||
|
||||
上面的代码中，由于是统一处理多个请求的异常，所以只要有一个请求失败了，就会马上走到 catch，剩下的请求就不会继续执行了。比如说：
|
||||
上面的代码中，由于是统一处理多个请求的异常，所以**只要有一个请求失败了，就会马上走到 catch**，剩下的请求就不会继续执行了。比如说：
|
||||
|
||||
- a 请求失败：走到 catch，不执行 b 和 c
|
||||
- a 请求失败：然后会走到 catch，不执行 b 和 c
|
||||
|
||||
- a 请求成功，b 请求失败：走到 catch，不执行 c。
|
||||
- a 请求成功，b 请求失败：然后会走到 catch，不执行 c。
|
||||
|
||||
## return 的返回值
|
||||
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
|
||||
## Promise 的常用API分类
|
||||
|
||||
### Promise的实例方法
|
||||
|
||||
## Promise 的常用 API：实例方法【重要】
|
||||
**实例方法**：我们需要先 new 一个 promise实例对象，然后通过 promise对象去调用 `then`、`catch`、`finally`方法。这几个方法就是 Promise 的实例方法。
|
||||
|
||||
Promise 自带的 API 提供了如下实例方法：
|
||||
具体来说，Promise 的自带API 提供了如下实例方法：
|
||||
|
||||
- promise.then()：获取异步任务的正常结果。
|
||||
|
||||
@ -11,103 +13,22 @@ Promise 自带的 API 提供了如下实例方法：
|
||||
|
||||
- promise.finaly()：异步任务无论成功与否，都会执行。
|
||||
|
||||
代码举例如下。
|
||||
|
||||
写法 1：
|
||||
### Promise的静态方法
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
function queryData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(function () {
|
||||
var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
|
||||
if (data.retCode == 0) {
|
||||
// 接口请求成功时调用
|
||||
resolve(data);
|
||||
} else {
|
||||
// 接口请求失败时调用
|
||||
reject({ retCode: -1, msg: 'network error' });
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
**静态方法**：可以直接通过大写的`Promise.xxx`调用的方法。这里的`xxx`就称之为静态方法。
|
||||
|
||||
queryData()
|
||||
.then((data) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(data);
|
||||
})
|
||||
.catch((data) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(data);
|
||||
})
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
具体来说，Promise 的自带API 提供了如下静态方法：
|
||||
|
||||
写法 2：（和上面的写法 1 等价）
|
||||
- `Promise.resolve()`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
function queryData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(function () {
|
||||
var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
|
||||
if (data.retCode == 0) {
|
||||
// 接口请求成功时调用
|
||||
resolve(data);
|
||||
} else {
|
||||
// 接口请求失败时调用
|
||||
reject({ retCode: -1, msg: 'network error' });
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
}
|
||||
- `Promise.reject()`
|
||||
|
||||
queryData()
|
||||
.then(
|
||||
(data) => {
|
||||
// 从 resolve 获取正常结果
|
||||
console.log('接口请求成功时，走这里');
|
||||
console.log(data);
|
||||
},
|
||||
(data) => {
|
||||
// 从 reject 获取异常结果
|
||||
console.log('接口请求失败时，走这里');
|
||||
console.log(data);
|
||||
}
|
||||
)
|
||||
.finally(() => {
|
||||
console.log('无论接口请求成功与否，都会走这里');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
- `Promsie.all()`
|
||||
|
||||
**注意**：写法 1 和写法 2 的作用是完全等价的。只不过，写法 2 是把 catch 里面的代码作为 then 里面的第二个参数而已。
|
||||
- `Promise.race`
|
||||
|
||||
前面的几篇文章，讲的都是 Promise的**实例方法**；今天这篇文章，我们来详细讲一下 Promise的**静态方法**。
|
||||
|
||||
## Promise 的常用 API：对象方法【重要】
|
||||
|
||||
Loading…
Reference in New Issue
Block a user