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. query 线段树 + 区间排序

    https://nanti.jisuanke.com/t/41391 这个题目没有很难想,比较暴力,但是要会算复杂度,不会算复杂度,就会觉得自己的算法会超时,实际上不会. 这个题目就是直接暴力求出每一 ...

  2. js和jq的获取焦点失去焦点写法

  3. python学习之if条件句的使用

    if循环 if 条件: 代码块 运行 if else的用法 if elseif else用法 if 条件1: elif 条件2: elif条件3: else:

  4. for do-while while区别

    分别用for  do-while while求1-100的和

  5. 【Kafka】CAP理论以及CAP定律

    目录 CAP理论 概述 Consistency Availability Partition Tolerance CAP理论 概述 1988年,加州大学计算机科学家Eric Brewer 提出了分布式 ...

  6. 一文教你快速搞懂速度曲线规划之S形曲线（超详细+图文+推导+附件代码）

    本文介绍了运动控制终的S曲线,通过matlab和C语言实现并进行仿真:本文篇幅较长,请自备茶水: 请帮忙点个赞

  7. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  8. [zoj3632]线段树的应用

    题意:f[i] = min(f[i+L]~f[i+R]) + x,计算f数组.从大到小计算即可,用线段树维护一下. #pragma comment(linker, "/STACK:10240 ...

  9. {path：“ /”，expires：7}这一段是什么意思？

    1.创建会话cookie: $ .cookie('name','value'); 2.创建到期的cookie,然后7天: $ .cookie('name','value',{到期日:7}); 3.创建 ...

  10. JVM入门--类加载器

    一.基础架构 概览 我们平时说的栈是指的Java栈,native method stack 里面装的都是native方法 细节架构图 二.类加载器 1.类的加载 方法区并不是存放方法的区域,其是存放类 ...