看完有可能搞懂javascript中的回调函数和promise异步对象哦

最新推荐文章于 2023-03-17 19:06:07 发布

梅子丨朱

最新推荐文章于 2023-03-17 19:06:07 发布

阅读量401

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/mr_carry/article/details/105682813

版权

js 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

ajax异步操作

ajax是异步执行请求的一种前端交互的艺术。其实现是基于XMLHttpRequest浏览器对象，其中IE5和IE使用ActiveXObject。如果需要兼容，可以这样写：
if (window.XMLHttpRequest) { //为IE7+, Firefox, Chrome, Opera, Safari
xmlHttpReq=new XMLHttpRequest();
} else { //IE6, IE5浏览器的兼容
xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
}
其中发送异步请求依赖于XMLHttpRequest的open()和send()方法。
xmlHttpReq.open("GET",url,true); //get请求，参数为请求类型，url，是否异步请求
xmlHttpReq.send();//发送

回调函数

回调函数可以理解为某一个函数需要做完某个操作然后才执行的那个函数叫回调函数。

promise异步对象

中文为承诺的意思。也是实现回调函数的方式之一。promise是异步编程的一种解决方案。我们通常这样写：

const promise = new Promise(function(resolve, reject) {
// ... 异步操作

if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

其实看着就是高配版的回调函数，其实promise可用于回调，其实功能上来说也非常相似。promise是对象，更系统，更全面，更好用。下面我们看个示例，通过代码来理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <style>
        .aaa{
            width: 550px;
            height: 500px;
        }
    </style>
</head>
<body>
<button onclick="getJSON()">发起异步请求：</button>
<button onclick="getJsonByCallback()">通过callback发起异步请求：</button>
<div id="showJson" style="width: 300px;height: 300px;border: 1px solid rebeccapurple">

</div>
<script>
    //回调函数执行
    function showJsonByCallback(url, successedb,failedb) {
        $.ajax({
            url:url,
            type: "get",
            success: function (json) {
                alert(JSON.stringify(json))
                successedb(json)
            },
            error:function (err) {
                failedb(err)
            }
        })
    }

    function successed(json) {
        $("#showJson").text(JSON.stringify(json))
    }
    function failed(error) {
        $("#showJson").text("请求错误"+error)
    }
    function getJsonByCallback() {
        showJsonByCallback("haha.json",successed,failed)
    }


    //promise执行异步请求
    const showJson = function (url) {
        const promise = new Promise(function (resolve,reject) {
            $.ajax({
                url:url,
                type: "get",
                success: function (json) {
                    resolve(json)
                },
                error:function (err) {
                    reject(err)
                }
            })
        })
        return promise
    }
    const getJSON = function(){
        showJson("haha.json").then(function (json) {
            $("#showJson").text(JSON.stringify(json))
        },function (error) {
            $("#showJson").text("请求错误"+error)
        })
    }
</script>
</body>
</html>

注释：引入jquery和自己在同级目录建立一个haha.json的文件就可以模拟

一般哈，在做jquery的ajax请求和vue的axios的时候，由于项目需要，我们都会封装一下这个请求，以免重复写一些共有的东西。那么，promise就是不二选择。比如，自定义报错，自定义json格式，自定义前后端token验证等。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。上文中的reslove代表执行成功的操作，reject代表执行失败之后的操作。自然相对应：

showJson("haha.json").then(function (json) {//成功
    $("#showJson").text(JSON.stringify(json))
},function (error) {//失败
    $("#showJson").text("请求错误"+error)
})

人面不知何处去，桃花依旧笑春风