Vue.js 学习笔记十四：Promise 之常用API：实例方法和对象方法

最新推荐文章于 2023-09-04 20:18:06 发布

stary1993

最新推荐文章于 2023-09-04 20:18:06 发布

阅读量219

点赞数 1

分类专栏： Vue.js 学习笔记文章标签： js

本文链接：https://blog.csdn.net/qq_27875933/article/details/119254277

版权

Vue.js 学习笔记专栏收录该内容

54 篇文章 10 订阅

订阅专栏

Promise 常用API

实例方法

对象方法

Promise 常用API

实例方法

Promise 自带的API提供了如下实例方法：

promise.then()：获取异步任务的正常结果。
promise.catch()：获取异步任务的异常结果。
promise.finaly()：异步任务无论成功与否，都会执行。

代码举例如下。

写法1：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实例方法1</title>
    </head>
    <body>
        <script type="text/javascript">
            const queryData = () => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const data = { code: 200, msg: 'hello world' } // 接口返回的数据
                        if (data.retCode == 0) {
                            // 接口请求成功时调用
                            resolve(data);
                        } else {
                            // 接口请求失败时调用
                            reject({ code: 500, msg: 'network error' })
                        }
                    }, 1000)
                })
            }

            queryData()
                .then(data => {
                    // 从 resolve 获取正常结果
                    console.log('接口请求成功时，走这里');
                    console.log(data);
                })
                .catch(data => {
                    // 从 reject 获取异常结果
                    console.log('接口请求失败时，走这里');
                    console.log(data);
                })
                .finally(() => {
                    console.log('无论接口请求成功与否，都会走这里');
                })
        </script>
    </body>
</html>

写法2：（和上面的写法1等价）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实例方法2</title>
    </head>
    <body>
        <script type="text/javascript">
            const queryData = () => {
                return new Promise((resolve, reject) => {
                    setTimeout(() => {
                        const data = { code: 200, msg: 'hello world' } // 接口返回的数据
                        if (data.retCode == 0) {
                            // 接口请求成功时调用
                            resolve(data);
                        } else {
                            // 接口请求失败时调用
                            reject({ code: 500, msg: 'network error' })
                        }
                    }, 1000)
                })
            }

            queryData()
                .then(
                    data => {
                        // 从 resolve 获取正常结果
                        console.log('接口请求成功时，走这里')
                        console.log(data)
                    },
                    data => {
                        // 从 reject 获取异常结果
                        console.log('接口请求失败时，走这里')
                        console.log(data)
                    }
                )
                .finally(() => {
                    console.log('无论接口请求成功与否，都会走这里')
                });
        </script>
    </body>
</html>

注意：写法1和写法2的作用是完全等价的。只不过，写法2是把 catch 里面的代码作为 then里面的第二个参数而已。

对象方法

Promise 自带的API提供了如下对象方法：

Promise.all()：并发处理多个异步任务，所有任务都执行成功，才能得到结果。
Promise.race(): 并发处理多个异步任务，只要有一个任务执行成功，就能得到结果。

Promise.all() 代码举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Promise.all() 代码举例</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
              封装 Promise 接口调用
            */
            const queryData = url => {
                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest()
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState != 4) {
                            return
                        }
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            // 处理正常结果
                            resolve(xhr.responseText)
                        } else {
                            // 处理异常结果
                            reject('服务器错误')
                        }
                    }
                    xhr.open('get', url)
                    xhr.send(null)
                })
            }

            const promise1 = queryData('http://localhost:8000/api1')
            const promise2 = queryData('http://localhost:8000/api2')
            const promise3 = queryData('http://localhost:8000/api3')

            Promise.all([promise1, promise2, promise3]).then(result => {
                console.log(result)
            })
        </script>
    </body>
</html>

Promise.race() 代码举例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Promise.race() 代码举例</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
              封装 Promise 接口调用
            */
            const queryData = url => {
                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest()
                    xhr.onreadystatechange = () => {
                        if (xhr.readyState != 4) {
                            return
                        }
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            // 处理正常结果
                            resolve(xhr.responseText)
                        } else {
                            // 处理异常结果
                            reject('服务器错误')
                        }
                    }
                    xhr.open('get', url)
                    xhr.send(null)
                });
            }

            const promise1 = queryData('http://localhost:8000/api1')
            const promise2 = queryData('http://localhost:8000/api2')
            const promise3 = queryData('http://localhost:8000/api3')

            Promise.race([promise1, promise2, promise3]).then(result => {
                console.log(result)
            })
        </script>
    </body>
</html>

stary1993

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 学习笔记十四：Promise 之常用API：实例方法和对象方法

目录Promise 常用API实例方法对象方法Promise 常用API实例方法Promise 自带的API提供了如下实例方法： promise.then()：获取异步任务的正常结果。 promise.catch()：获取异步任务的异常结果。 promise.finaly()：异步任务无论成功与否，都会执行。代码举例如下。写法1：<!DOCTYPE html><html> <head>
复制链接

扫一扫