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. H. Subsequences (hard version) dp

    H. Subsequences (hard version) 这个题目好难啊,根本就不知道怎么dp,看了题解,理解了好一会才会的. 首先dp[i][j] 表示前面 i  个字符,形成长度为 j  的不 ...

  2. HTML往div中赋值

    HTML中往div赋值 <div id="mazey">content</div> 使用JavaScript: var mazey=document.get ...

  3. 【编程之美】常用于单片机的接口适配器模式C语言实现

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/lihuidashen/p/128750 ...

  4. 自动配置的Springboot内junit测试单元不能运行

    解决测试单元不能运行 问题:测试单元的 @Test 前面没有运行图标 解决 IDEA内:File - Setting - Plugins:搜到JUnitGenerator2.0,安装,重启IDEA 光 ...

  5. httpd+tomcat 均衡负载

    接前面的文章http://www.cnblogs.com/gqdw/p/3785812.html workers.properties worker.list=controller#worker1 w ...

  6. react项目中使用less并修改antd主题样式

    一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...

  7. linux常用命令---centOS7的管理服务（针对yum安装的）

    centOS7的管理服务(针对yum安装的)

  8. Django操作cookie

    浏览器清空cookie快捷键:ctrl+shift+delete,cookie中包含csrf认证信息 获取Cookie request.COOKIES['key'] request.COOKIES.g ...

  9. 愉快地使用Open Live Writer写博客

    想要坚持写博客的习惯,却又无法忍受网页编辑器的各种不方便?open live writer是一个不错的选择.对我来说最有诱惑的就是能够快速的黏贴图片.代码.使用过程遇到不少坑,最坑的就是不能使用163 ...

  10. 委托 事件 observer

    详细介绍http://www.cnblogs.com/jcz1206/articles/2730793.html  ---摘录别人的 using System;using System.Collect ...