JavaScript的异步操作（Promiseasyncawait）

最新推荐文章于 2024-04-20 18:10:15 发布

Learn-anything

最新推荐文章于 2024-04-20 18:10:15 发布

阅读量745

点赞数

分类专栏： JavaScript 文章标签： javascript 前端异步 promise

本文链接：https://blog.csdn.net/fanlehai/article/details/121997681

版权

一、Promise 是什么？

Promise 是一个用于绑定异步操作与回调函数的对象，让代码更易读且更合理。

1、简单实例

<!-- index.html -->
<!DOCTYPE html>
<html lang='zh-CN'>

<head>
    <meta charset="utf-8">
    <title>异步调用</title>

    <script>
        let myFirstPromise = new Promise(function (resolve, reject) {
     
            setTimeout(function () {
     
                resolve("成功!");
                // reject("失败");
            }, 2500);
        });

        myFirstPromise
            .then((successMessage) => {
     
                console.log(successMessage);
            })
            .catch((errorMessage) => {
     
                console.log(errorMessage);
            });
    </script>

</head>

<body>
    <h1>打开 console 看输出结果！</h1>
</body>

</html>

二、语法说明

1、运行规则

不同于传统的回调， then 关联的函数，会在异步操作完成后执行；如果有多个 then，那么也会依次调用，除非其中有调用 reject 跳转到 catch 。

2、创建 Promise 对象

通过 new 来创建 Promise 对象，当异步操作成功后调用 resolve 来改变 Promise对象的状态；失败后就调用 reject 。

const myFirstPromise = new Promise((resolve, reject) => {
   
    // 做一些异步操作，最终会调用下面两者之一:
    //
    // resolve(someValue);
    // 或
    // reject("failure reason");
});

3、函数拥有 Promise 功能

函数想要拥有 Promise 功能，只需让其返回一个 Promise对象即可。

function myAsyncFunction(url) {
   
    return new Promise((resolve, reject) => {
   
				const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.onload = () => resolve(xhr.responseText);
        xhr.onerror = () => reject(xhr.statusText);
        xhr.send();
    });
};

4、不使用回调

对 setTimeout 进行 Promise 封装，代码易读且包含异常处理等情况，步骤如下：

// 1、过去是用方法
setTimeout(() => saySomething("10 seconds passed"), 10000);

// 2、用 Promise 封装
const wait = ms =>

最低0.47元/天解锁文章

Learn-anything

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的异步操作（Promiseasyncawait）

一、Promise 是什么？Promise 是一个用于绑定异步操作与回调函数的对象，让代码更易读且更合理。1、简单实例<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>异步调用</title> <script> let myFir
复制链接

扫一扫