Promise对象es6

最新推荐文章于 2024-07-20 10:36:53 发布

没有bug的小史

最新推荐文章于 2024-07-20 10:36:53 发布

阅读量56

点赞数

文章标签： html5 javascript jquery 前端开发语言

本文链接：https://blog.csdn.net/djsknsns/article/details/127697396

版权

头部先引入JQ

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

Promise详情

一.Promise设计初衷
        1.解决回调地狱
        2.异步操作

//1.回调地狱： 回调函数的层层嵌套
  $.get('url', function (data, static) {
        console.log(data);
        $.get('url', function (res) {
            console.log(data.id);
            console.log(res);
            $.ajax({
                url: '',
                async: true,
                type: 'get',
                data: {},
                success(res1) {
                    console.log(res);
                    console.log(res.id);
                }
            })
        })
    /*   1.创建：new Promise(function(resolve,reject{}))
        resolve:成功，reject：失败
        初始状态：pending 成功状态：fulfilled  失败状态：rejected
        初始状态：  ===》成功状态     resolve
        初始状态：  ===》失败状态     reject
        不可逆转
    */
    let pro = new Promise(function (resolve, reject) {
        $.ajax({
            url: 'url',
            type: 'POST',
            data: {
                type: 'free',
                pageNum: 1,
                pageSize: 10
            },
            success: function (res) {
                resolve(res)
            },
            error: function (err) {//失败的回调函数
                reject(err)
            }

        })
    //用then处理操作成功，catch处理操作异常
     pro.then(requestA)
        .then(requestB)
        .then(requestC)
        .catch(requestError);
    function requestA(res) {
        console.log(res);
        console.log('请求A成功');
        return '请求B.下一个就是你了'
    }
    function requestB(res) {
        console.log('上一步的结果：' + res);
        console.log('请求B成功');
        return '请求C,下一个就是你了'
    }
    function requestC(res) {
        console.log('上一步焦点结果给： ' + res);
        console.log('请求C成功');
    }
    function requestError(err) {
        console.log(err);
        console.log('请求失败');
    }