如何使用promise封装原生ajax，$.ajax(),以及fetch？

最新推荐文章于 2024-09-29 20:25:59 发布

鹅鹅鹅gg

最新推荐文章于 2024-09-29 20:25:59 发布

阅读量65

点赞数

分类专栏： promise 文章标签： ajax javascript jquery

本文链接：https://blog.csdn.net/wyl_gg/article/details/109656255

版权

promise 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原生封装ajax

<!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>
<script>
    //原生封装ajax

    function ajax(url) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()  //创建对象
            xhr.open("GET", url, true) //初始化请求
            // xhr.setRequestHeader();  //设置请求头
            xhr.onreadystatechange = function () {
                if (xhr.readyState != 4) return
                if (xhr.readyState === 4 && xhr.status === 200) {
                    resolve(this.responseText, xhr)
                } else {
                    reject(xhr.responseText);
                }
            }
            xhr.send(null)
        })
    }

    ajax("http://120.53.31.103:84/api/app/recommend/appIndex").then(res => {
        console.log(JSON.parse(res));
    })

</script>

</html>

jquery封装ajax

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body>
    <script>
        let aja = function (url) {
            return new Promise((resolve, reject) => { //返回Promise对象
                $.ajax({
                    url,
                    type: "GET",
                    success: function (res) {
                        resolve(res);
                    },
                    error: function (err) {
                        reject(err);
                    },
                })
            })
        }

        aja("http://120.53.31.103:84/api/app/recommend/appIndex").then(res => {
            console.log(res);
        })
    </script>
</body>

</html>

fetch封装ajax

<!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 aa(url) {
            return new Promise((resolve, reject) => {
                resolve(fetch(url, {
                    type: "GET",
                    success: function (res) {
                        // resolve(res.text);
                        return res.text()
                    },
                    error: function (err) {
                        reject(err);
                    },
                }))
            })
        }

        aa("http://120.53.31.103:84/api/app/recommend/appIndex").then(res => {
            console.log(res);
            return res.text()
        }).then(err => {
            console.log(JSON.parse(err));
        })
    </script>
</body>

</html>