ES6 - Promise和Ajax （精华）

最新推荐文章于 2024-05-04 17:11:41 发布

小白快跑true

最新推荐文章于 2024-05-04 17:11:41 发布

阅读量328

点赞数

分类专栏： js es6

本文链接：https://blog.csdn.net/tabweb/article/details/107097102

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

es6

2 篇文章 0 订阅

订阅专栏

导读：

Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介，客观来说就是避免ajax回调地狱（反复嵌套回调），不然代码不够直观。

例子：

模拟Ajax和Promise的结合使用(Promise主要用于异步执行顺序) ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <script type="text/javascript">
    /*
        定义一个使用promise的ajax请求,模拟用户登录场景
    */
    const ajaxPromise = obj => {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: obj.type,
                url: obj.url,
                data: obj.data,
                success: res => {
                    resolve(res);      // 请求成功则转成Promise对象并判断为resolve状态
                },
                error: err => {
                    reject(err.status);      // 请求失败则转成Promise对象并判断为reject状态
                }
            })
        })
    } 

    /*
        函数1：判断用户登陆成功
     */
    let userLogin = () => {
        // 第一次执行ajaxPromise
        ajaxPromise({
            type: 'get',
            url: 'test.php',
            data: { userName: 'Verin', userPwd: '123456'}
        }).then(res => {
            console.log('后台校验提交的数据并返回成功信息');        // 成功则二次ajax请求，取用户信息
            getUserInfo(res);
        }).catch(err => {
            console.log('用户校验提交的数据失败，无法登陆');
        })
    }

    /*
        函数2：取出对应登录用户的信息
     */
    let getUserInfo = res => {
        ajaxPromise({
            type: 'get',
            url: 'test2.php',
            data: { status: 'success to finish getUserInfo!'}
        }).then(res => {
            console.log('获取用户信息：');
            console.log(res);
        }).catch(err => {
            console.log('获取用户信息失败' + err);
        })
    }

    userLogin();
    </script>
</body>
</html>

总结：

刚开始接触 Promise 的伙伴可能有点晕头，书主也琢磨了好一会才想明白，故写此简书一篇，来个 Promise 流程总结：
1 .把 ajax 返回成功 / 失败的回调封装成一个 Promise 对象（同时判断 resolve / reject 状态）
2 .其对象根据传来的状态 resolve 则执行.then( res => {} // 实际在Promise.prototype上 )来执行ajax一层返回成功后的二层 ajax 请求，状态为 reject 的则执行对象的.catch( err => {} // 实际在Promise.prototype上 )，以此类推，实现异步请求的顺序执行

source

小白快跑true

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 - Promise和Ajax （精华）

导读：Promise实际是充当ajax获取后台数据后执行回调的异步执行顺序的一个媒介，客观来说就是避免ajax回调地狱（反复嵌套回调），不然代码不够直观。例子：模拟Ajax和Promise的结合使用(Promise主要用于异步执行顺序) ：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document<...
复制链接

扫一扫