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. JAVA基础篇 之 类的初始化

    类中属性的隐式初始化,代码如下,我们看下不同类型默认的初始值是什么 创建一个Demo类如下: class Demo { int a; byte b; short c; long d; boolean ...

  2. 一阶RC低通滤波器详解（仿真+matlab+C语言实现）

    文章目录 1 预备知识 2 simulink 仿真 3 simulink 运行结果 4 matlab实现 5 matlab运行结果 6 C语言实现 7 C语言运行结果 如果本文帮到了你,帮忙点个赞: ...

  3. 马上要去bupt参加培训了。。

    想想我一直在逃避,失败人生.傻逼废物垃圾废人...我这么弱还活在世界上,真的对不起 Model

  4. 排序算法：图解快速排序算法--不超过18行代码Python和JavaScript实现快速排序算法

    快速排序有三大要素 分别是 第一:找基准值--key 第二:分区 第三:比较数字大小 先来看下快速排序流程: 基准值key选取了第一个元素78 基准值是可以任意一个元素 因为选择了最左边的数据,那么就 ...

  5. xilinx VDMA IP核使用

    VDMA实用配置说明 VDMA是通过AXI Stream协议对视频数据在PS与PL端进行搬运,开发者无需关注AXI Stream协议,在BlockDesign设计中只需要把相应信号进行连接即可. VD ...

  6. java 使用抽象工厂封装特性方法

    1.创建抽象类:封装含有相同特性的方法. */ public abstract class AbstractPayment { public abstract String progress() th ...

  7. 「雕爷学编程」Arduino动手做（17）---人体感应模块

    37款传感器和模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器与模块,依照实践出真知(动手试试)的理念,以学习和交流为目的,这里准备 ...

  8. 微信小程序上传文件时弹出当前系统代理不是安全代理,是否信任

    我的开发环境是.net core 启用了https,而微信的开发者工具不认这个证书. 解决办法1:关闭https 然后在 Startup.cs 中关闭注释掉 app.UseHttpsRedirecti ...

  9. POJ3275 Ranking the Cows floyd的bitset优化

    POJ3275 Ranking the Cows #include <iostream> #include <cstdio> #include <bitset> u ...

  10. python操作rabbitmq，实现生产消费者模型

    更多详情参考官方文档:https://www.rabbitmq.com/tutorials/tutorial-six-python.html 参考博客:https://blog.csdn.net/we ...