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. Day_12【集合】扩展案例2_键盘录入一个字符串，对其进行去重，并将去重后的字符串组成新数组

    需求分析:键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符 思路: 1.键盘录入字符串 2.遍历字符串,将每个字符存储到集合中 3.将集合中重复的字符去掉 4.创建新集合,遍历老集合,获取老 ...

  2. Kitty Cloud(HTTP_RPC)的全局异常处理

    项目地址 https://github.com/yinjihuan/kitty-cloud 异常处理不用我讲,大家都清楚.单独的异常处理太繁琐,全局异常处理可以在一个应用中统一进行异常的处理,非常方便 ...

  3. Centos7下设置ceph 12.2.1 （luminous）dashboard UI监控功能

    前言 本文所使用的集群是作者在博客 Centos7下部署ceph 12.2.1 (luminous)集群及RBD使用  中所搭建的集群 dashboard是为了完成对集群状态进行UI监控所开发的功能, ...

  4. 黑马程序员_毕向东_Java基础视频教程——常量（随笔）

    常量 常量表示不能被改变的数值. Java常量的分类 整型常量.所有整数 小数常量.所有小数 布尔型常量.特殊只有两个值:true.false. 字符常量.将一个数字字母或者符号用单引号(' ')标识 ...

  5. Flutter不能做什么：局限性

    老孟导读:您在网络上一定看过很多Flutter如何优秀的.如何完美的文章,而这篇文章将会告诉你Flutter不能做什么,注意并不是Flutter的缺点,比如第三方插件少.Dart不流行等,在我看来这都 ...

  6. Ubuntu16.04 flask + nginx + uWSGI 部署

    前言 又有段时间没写博客了,最近一直在写外包项目,都没啥空余时间.这几天花了不少时间做项目部署,也看了不少教程,这里就记录下整个过程,也方便以后要做类似部署的时候不用再查来查去了. flask + u ...

  7. ScheduleMaster新特性之延时任务初体验

    ScheduleMaster在上个月底更新到了2.0版本,在功能和代码以及文档上都往前跨了很大一步,详细信息可以参考这篇文章:https://www.cnblogs.com/hohoa/p/12772 ...

  8. git :error: bad signature fatal: index file corrupt

    删除.git/index文件再执行: git reset 不行的话就执行: git read-tree  --empty https://stackoverflow.com/questions/213 ...

  9. P3366【模板】最小生成树

    P3366[模板]最小生成树 Kruskal #include <bits/stdc++.h> using namespace std; typedef long long ll; ; ; ...

  10. MyBatis In的使用

    http://blog.csdn.net/unei66/article/details/17792503 MyBatis In的使用 标签: mybatisin 2014-01-03 16:23 74 ...