1.扩展：ajax

1.1 代码如下

$.ajax({

    url:'地址',

    type:'get/post',

    data:{},

    dataType:'json/jsonp',

    success:function(res){

        //请求成功，接收返回值

    }

})

1.2 概念

  • ajax不能跨域请求

    • 两个网址：协议 主域号 端口号 完全相同时，这时两个网址完全相同，任意其一不同，即为跨域请求
  • 解决跨域：
    • 1.jsonp:在$.ajax({dataType:'jsonp'}),需要后台支持jsonp形式
    • 2.cors:需要后台配合
    • 3.后台设置允许所有或指定网址能直接访问
  • 简写形式：
    • $.get(url,data,function(res){})
    • $.post(url,data,function(res){})

2.jQuery里的Promise

2.1 个人理解

  • 同步：同时只能做一件事 代码简单
  • 异步：操作之间没有关系 同时请求进行多个操作，小程序中可用于请求数据api接口，代码更复杂,用同步一样的方式，来书写异步代码
  • Promise.all([$.ajax(),$.ajax()]).then(result=>{alert('对了')},err=>{alert('错了')})

2.2 代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>高版本jquery中Promise</title>

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>

    <script>

        // 高版本jquery中Promise自带封装函数

        Promise.all([

            $.ajax({

                url: 'arr.txt',

                dataType: 'json'

            })

        ]).then(function(arr) {

            alert('成功');

            let [res1, res2] = arr;

            alert(res1);

            alert(res2);

        }, function() {

            alert('失败');

        });

    </script>

</head>

<body>

</body>

</html>

3.Promise怎么用

3.1 利用函数赋值来返回请求数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Promise怎么用</title>

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>

    <script>

        let p = new Promise(function(resolve, reject) {

            // 异步代码

            // resolve——成功了

            // reject——失败了

            $.ajax({

                url: 'arr.txt',

                data: {},

                dataType: 'json',

                success: function(arr) {

                    //请求成功，接收返回值

                    resolve(arr);

                },

                error(err) {

                    reject(err);

                }

            });

        });

        // 原先js时

        p.then(function() {

            alert('成功');

        }, function() {

            alert('失败');

        });

    </script>

</head>

<body>

</body>

</html>

3.2 利用函数参数来进行promise操作返回请求数据

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Promise怎么用</title>

    <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>

    <script>

        // 封成函数,进行参数传递即可

        function createPromise(url) {

            return new Promise(function(resolve, reject) {

                // 异步代码

                // resolve——成功了

                // reject——失败了

                $.ajax({

                    url: 'arr.txt',

                    data: {},

                    dataType: 'json',

                    success: function(arr) {

                        //请求成功，接收返回值

                        resolve(arr);

                    },

                    error(err) {

                        reject(err);

                    }

                });

            });

        }

        // let p1 = new Promise(function(resolve, reject) {

        //     // 异步代码

        //     // resolve——成功了

        //     // reject——失败了

        //     $.ajax({

        //         url: 'arr.txt',

        //         data: {},

        //         dataType: 'json',

        //         success: function(arr) {

        //             //请求成功，接收返回值

        //             resolve(arr);

        //         },

        //         error(err) {

        //             reject(err);

        //         }

        //     });

        // });

        // let p2 = new Promise(function(resolve, reject) {

        //     // 异步代码

        //     // resolve——成功了

        //     // reject——失败了

        //     $.ajax({

        //         url: 'arr.txt',

        //         data: {},

        //         dataType: 'json',

        //         success: function(arr) {

        //             //请求成功，接收返回值

        //             resolve(arr);

        //         },

        //         error(err) {

        //             reject(err);

        //         }

        //     });

        // });

        // 现在js时

        Promise.all([

            // p1, p2

            // 简化操作

            createPromise('arr.txt')

        ]).then(function(arr) {

            alert('成功');

            let [res1, res2] = arr;

            alert(res1);

            alert(res2);

        }, function() {

            alert('失败');

        });

    </script>

</head>

<body>

</body>

</html>

ES6-Promise承诺的更多相关文章

  1. ES6 Promise 异步操作

    最近越来越喜欢与大家进行资源分享了,并且及时的同步到自己的园子内,为什么呢? 一.小插曲(气氛搞起) 在上个月末,由于领导的高度重视(haha,这个高度是有多高呢,185就好了),走进了公司骨干员工的 ...

  2. es6 promise 所见

    一.Promise是什么? Promise 是异步编程的一种解决方案: 从语法上讲,promise是一个对象,从它可以获取异步操作的消息:从本意上讲,它是承诺,承诺它过一段时间会给你一个结果. pro ...

  3. 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise

    Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...

  4. ES6 Promise 接口

    构造函数 new Promise(function(resolve, reject){}); 构造函数接受一个函数(executor)作为参数,该函数在返回 Promise 实例之前被调用.函数的两个 ...

  5. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  6. ES6 Promise 全面总结

    转载:点击查看原文 ES6 Promise对象 ES6中,新增了Promise对象,它主要用于处理异步回调代码,让代码不至于陷入回调嵌套的死路中. @-v-@ 1. Promise本质 Promise ...

  7. 微信小程序Http高级封装 es6 promise

    公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和a ...

  8. 解析ES6 Promise

    ES6 Promise 概念之类的,大概读者都应该有所知道,接下来我们直入终点. 先让我们来看看什么是Promise吧,他是一个object,类,arry,function? 首先,学习它的时候应该讲 ...

  9. jquery Promise和ES6 Promise的区别

    1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...

  10. ES6 Promise对象then方法链式调用

    then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...

随机推荐

  1. kafka简介及集群部署

    消息队列概念:(Message queue): “消息”是在两台计算机间传送的数据单位.消息可以非常简单,例如只包含文本字符串:也可以更复杂,可能包含嵌入对象. “消息队列”是在消息的传输过程中保存消 ...

  2. mongodb cluster

    假设三台机器,ip分别为192.168.1.10,192.168.1.11,192.168.1.12,分别在每台电脑上下载并解压mongodb,关闭防火墙或者开放防火墙端口 一.安装shard 配置文 ...

  3. Spring Cloud 系列之 Config 配置中心（三）

    本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Config 配置中心(一) Spring Cloud 系列之 Config 配置中心(二) 本篇文章讲解 Conf ...

  4. 生产者消费者问题中的同步机制JAVA设计和实现

    目录 问题描述 问题分析 利用记录型信号量解决 运行环境 实现思路 代码实现 运行截图 过程中出现的问题和注意点 利用AND信号集解决 运行环境 实现思路 代码实现 运行截图 问题描述 若干进程通过有 ...

  5. vscode调试webpack的启动和打包部署过程，nodejs调试

    launch.json ``` {   // 使用 IntelliSense 了解相关属性.    // 悬停以查看现有属性的描述.   // 欲了解更多信息,请访问: https://go.micr ...

  6. libevent到底是同步还是异步，是阻塞还是非阻塞

    应该从不同角度看libevent的同步/异步.阻塞/非阻塞: IO数量的角度:select出来之前,会阻塞在一个io上,处理完成后再阻塞在下一个io上:之后就是把所有的io fd拿过来,都不阻塞,一个 ...

  7. 利用python在微信群中签到、抢沙发（适用于任何账号）

    利用python在微信群中签到.抢沙发 注意 程序仅能在电脑上运行,运行时需要保证群界面在最前端且不被移动. 背景 我是一名高中生(2020年),疫情期间,在家上网课,有的老师让我们在班群里签到. 其 ...

  8. vue element-ui el-form-item 循环渲染，验证表单内容

    data里面如下图:

  9. live2d web端加载moc3模型

    大佬博客链接:https://blog.csdn.net/weixin_44128558/article/details/104792345 照着大佬的博客做一下,可以先学会怎么生成bundle.js ...

  10. python中的字典dict

    字典的常用操作及方法 增: dic[key]=value 有则修改,无则添加 dic.setdefault( ) 有则不变,无则添加:有键无值则值为None, 删:  dic.pop(key) 删除后 ...