JavaScript之promise对象及ajax的使用

cloudOnSkyline

已于 2022-07-19 14:11:56 修改

阅读量1.4k

点赞数 1

分类专栏： JavaScript 文章标签： javascript ajax json

于 2022-07-19 14:11:34 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125870363

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

3.ajax请求及利用promise封装ajax

4.json数据

本文主要介绍JavaScript中的promise对象、ajax请求数据、json数据格式以及如何利用promise封装ajax.

1.promise对象

promise是异步编程的一种解决方案，是由ES6提出的原生JS对象。

（1）基本使用

promise对象的状态默认为pending(进行中)，根据后端请求数据的成功与否改变其状态，再根据状态调用then方法获取相应的值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
       
        let myPromise = new Promise((resolve, reject) => {
            let flag = true;

            if (flag) {
                resolve('success');
            } else {
                reject('fail');
            }
        })
        myPromise.then(resolve => {
            console.log(resolve);
        }, reject => {
            console.log('The status now is ' + reject)
        })
    </script>
</body>

</html>

结果：

（2）链式写法

promise可书写连续的then方法进行调用，后续then的参数取的是上一个then的返回值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 可对获取的数据做多重处理 -->
</head>

<body>
    <script>
        let mPro = new Promise((resolve, reject) => {
            resolve(2);
        })
        mPro.then((resolve) => {
            console.log(resolve);
            return resolve * 100;
        }).then((resolve) => {
            console.log(resolve);
            return resolve * 100
        }).then((resolve) => {
            console.log(resolve);
        })
    </script>
</body>

</html>

结果：

（3）catch写法

promise提供catch方法简化获取错误信息的操作。以下实例给出了不写catch的等价写法。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 错误信息获取的简写形式 -->
</head>

<body>
    <script>
        let myPro = new Promise((resolve, reject) => {
            reject('错误信息');
        })
        let myPro1 = new Promise((resolve, reject) => {
            reject('错误信息1');
        })
        myPro.then(null, (reject) => {
            console.log(reject);
        })
        myPro1.catch((reject) => {
            console.log(reject);
        })
    </script>
</body>

</html>

结果：

2.模拟异步

以下实例通过setTimeout定时器模拟向后端获取数据的异步操作。 setTimeout为模拟异步，不是真正的异步，会放到最后执行，故会出现如图所示的运行结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>

<body>
    <script>
        function time(s) {
            console.log(2);
            return new Promise((resolve, reject) => {
                console.log(3);
                setTimeout(() => {
                    console.log(6);
                    resolve('This is the end!');
                }, s)
            })
        }
        console.log(1);
        let mPro = time(2000);
        console.log(4);
        mPro.then((resolve) => {
            console.log(7);
            console.log(resolve);
        })
        console.log(5);
    </script>
</body>

</html>

运行结果：

3.ajax请求及利用promise封装ajax

原生ajax的请求需要利用XMLHttpRequest对象，主要分为四步操作。

（1）创建对象

（2）打开请求网址

（3）发送请求

（4）获取数据

利用函数以及promise对象可对上述操作进行封装，如下所示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // // 1.创建ajax对象
        // let ajax = new XMLHttpRequest();
        // //2.打开请求网址
        // ajax.open("GET", 'http://127.0.0.1:5500/text.json');
        // //3.发送请求
        // ajax.send();
        // //4.获取数据
        // ajax.onreadystatechange = () => {
        //     if (ajax.readyState == 4) {
        //         if (ajax.status == 200) {
        //             console.log('获取数据成功');
        //             let data = JSON.parse(ajax.responseText);
        //             console.log(data);
        //         } else {
        //             console.log('获取失败');
        //         }
        //     }
        // }
        //利用promise封装ajax
        function sendAjax(url) {
            return new Promise((resolve, reject) => {
                let ajax = new XMLHttpRequest();
                ajax.open("GET", url);
                ajax.send();
                ajax.onreadystatechange = () => {
                    if (ajax.readyState == 4) {
                        if (ajax.status == 200) {
                            console.log('获取数据成功');
                            let data = JSON.parse(ajax.response);
                            resolve(data);
                        } else {
                            console.log('获取失败');
                        }
                    }
                }
            })
        }

        let a = sendAjax('http://127.0.0.1:5500/text.json');
        a.then(resolve => {
            console.log(resolve);
        })
    </script>
</body>

</html>

4.json数据

json数据是前后端通信所使用的统一数据格式，利用JSON.parse()可以将JSON格式的数据解析为正常的数据，利用JSON.stringify()可以将普通的数据转化为json格式的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
    <script>
        let person = '{"name":"张三","age":19}';
        let array = '[1,2,3,4]';
        let Obj = {
            name: 'ls',
            age: 45
        };
        let arrayStr = [1, 3, 4, 5];
        console.log(JSON.parse(person));
        console.log(JSON.parse(array));
        console.log(JSON.stringify(Obj));
        console.log(JSON.stringify(arrayStr));
    </script>
</body>

</html>