2020-09-24---Promise & jsonP

最新推荐文章于 2023-03-14 08:29:18 发布
最新推荐文章于 2023-03-14 08:29:18 发布
阅读量260 收藏
点赞数
分类专栏： H5
本文为博主原创，未经博主允许不得转载。如有问题，欢迎指正。
本文链接：https://blog.csdn.net/qq_45021462/article/details/108785003
版权
H5 同时被 2 个专栏收录
55 篇文章 0 订阅
订阅专栏
me
52 篇文章 0 订阅
订阅专栏

Promise & jsonP

Promise

一、什么是promise?

是ES6提出的一种异步编程解决方案。它是一个构造函数Promise

二、语法：

//resolve : 成功    reject : 失败
    new Promise((resolve,reject)=>{
        //处理的异步程序
        if(处理成功){
            resolve();
        }else{
            reject();
        }
    });

三、方法

Promise.prototype.then : 当promise返回resolve状态时，可以调用then方法
Promise.prototype.catch : 当promise返回reject状态时，可以调用catch方法

四、Promise有三种状态

resolved : 成功
reject : 失败
pending : 进行中

五、 Promise的静态方法 Promise.all()

all : 当数组中所有返回的promise对象全部返回resolve状态时，当前all方法返回resolve.如果有一个promise对象返回reject,那么当前all方法返回reject.

当有多个异步程序时

new Promise((resolve,reject)=>{
    if(){
        resolve()
    }else{
        reject()
    }
}).then(()=>{
    return new Promies(){}
}).then(()=>{
    return new Promise(){}
}).catch(()=>{})

应用

1.计时器回调函数

要实现3秒后输出数字3,2秒后输出数字2,1秒后输出数字1的效果，应为计时器是异步函数，如果不嵌套就会同时进行，必须嵌套使用才能实现我们上面的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01计时器回调函数</title>
</head>
<body>
    <script>
        setTimeout(() => {
            alert(1);
            setTimeout(() => {
                alert(2);
                setTimeout(() => {
                    alert(3);
                },1000)
            },2000)
        },3000)
    </script>
</body>
</html>

但是层级的回调嵌套会造成回调地狱。所以有了Promise来解决这个问题

2.计时器Promise

下面这个只是使用了一个Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03计时器promise</title>
</head>
<body>
    <script>
        new Promise((resolve,reject) => {
           setTimeout(() => {
               resolve();
           },3000);
        }).then(() => {
            alert(3);
            setTimeout(() => {
                alert(2)
            },2000);
        })
    </script>
</body>
</html>

3.计时器 Promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05计时器promise</title>
</head>
<body>
    <script>
        new Promise((resolve,reject) => {
            setTimeout(() => {
                resolve();
            },3000)
        }).then(() => {
            alert(3);
            return new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve();
                },2000)
            })
        }).then(() => {
            alert(2);
            setTimeout(() => {
                alert(1);
            },1000)
        })
    </script>
</body>
</html>

4.ajax & 回调嵌套

ajax.js

let ajax = {};
ajax.get = function (url,fnWin,fnFail) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                if(fnWin instanceof Function){
                    fnWin(xhr.responseText);
                }
            }else{
                if(fnFail instanceof Function){
                    fnFail();
                }
            }
        }
    }
}
ajax.post = function (url,data,fnWin,fnFail) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('post',url,true);
    xhr.setRequestHeader('Content-type','Application/x-www-form-urlencoded;charset=utf-8');
    xhr.send(data);
    xhr.onreadystatechange = function () {
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                if(fnWin instanceof Function){
                    fnWin(xhr.responseText);
                }
            }else{
                if(fnFail instanceof Function){
                    fnFail();
                }
            }
        }
    }
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02ajax回调嵌套</title>
</head>
<body>
    <script src="js/ajax.js"></script>
    <script>
        ajax.get('02text1.txt',data => {
            ajax.get(data,data => {
                ajax.get(data,data => {
                    alert(data);
                })
            })
        })
    </script>
</body>
</html>

5.ajax & promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04ajax promise</title>
</head>
<body>
    <script src="js/ajax.js"></script>
    <script>
        new Promise((resolve,reject) => {
            ajax.get('02text1.txt',data => {
                resolve(data);
            })
        }).then((data) => {
            ajax.get(data,data => {
                alert(data);
            })
        })
    </script>
</body>
</html>

6.ajax & promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06ajax promise</title>
</head>
<body>
    <script src="js/ajax.js"></script>
    <script>
        new Promise((resolve,reject) => {
            ajax.get('02text1.txt',(data) => {
                resolve(data);
            })
        }).then((data) => {
            return new Promise((resolve,reject) => {
                ajax.get(data,data => {
                    resolve(data);
                })
            })
        }).then(data => {
            ajax.get(data,data => {
                alert(data);
            })
        })
    </script>
</body>
</html>

Ajax的同源策略

同源是指：同协议，同域名（主机名）和同端口。
当要访问不同域名，或者不同协议，或者不同端口的时候需要跨域访问。

跨域方式有

  1. 后端代理
  2. jsonP
  3. xhr2
  4. Nginx

jsonP（前端可以实现的跨域方式）

jsonP原理：
本质是利用了src跨域的特点。通过动态创建script标签，设置src属性为对方的接口地址，以get方式传递请求，并将响应的结果通过回调函数返回。
要主注意：回调函数必须是全局函数

使用jsonP实现淘宝的搜索下拉提示

思路：当我们在搜索框输入我们想要搜索的内容，键盘弹起的那一刻，下面出来一系列和我们搜索相关的提示，即键盘弹起事件。
当键盘弹起的时候，动态地创建一个script标签，并设置它的src属性值为我们提前在淘宝找好的接口地址，然后修改接口地址里面的两个地方，第一个是把关键字修改为当前文本输入框的值，第二个是回调函数的名字，修改为我们自己写的回调函数的名字。

例如，当我们在淘宝的输入框输入 hua ,然后我们在控制台找见一个接口地址为 https://suggest.taobao.com/sug?code=utf-8&q=hua&_ksTS=1600949240906_450&callback=jsonp451&k=1&area=c2c&bucketid=4 然后在里面找我们在输入框输入对的 hua,把这个值改为this.value,即我们在输入框输入的值；然后在接口地址中找见回调函数，一般为cb或者callback,把这个值修改为我们自己写的回调函数的名字。修改之后为：https://suggest.taobao.com/sug?code=utf-8&q=${this.value}&_ksTS=1600949240906_450&callback=fn&k=1&area=c2c&bucketid=4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jsonP</title>
    <style>
        input{
            width: 300px;
            height: 30px;
            border: 2px solid orange;
            border-radius: 15px;
            outline: none;//去掉input控件的外边框
        }
        a{
            text-decoration: none;
            color: black;
            font-weight: 900;
            display: inline-block;
            margin-bottom: 10px;
        }
        #box{
            width: 305px;
            height: 350px;
            border: 2px solid gray;
            /* display: none; */
        }
    </style>
</head>
<body>
    <input type="text" name="" id="">
    <div id="box"></div>
    <script>
        //jsonP前端跨域的方法，动态地创建script标签，利用其scr属性的跨域特点，设置src属性为对方的接口地址，一get方式传递请求，并将响应结果通过回调函数返回。要注意，回调函数必须是全局函数
        
        //百度
        // https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1464,32328,31253,32723,7632,32115,32719,26350&wd=yi&req=2&csor=2&pwd=y&cb=jQuery1102009665188345799813_1600947605277&_=1600947605280

        //淘宝
        // https://suggest.taobao.com/sug?code=utf-8&q=hua&_ksTS=1600949240906_450&callback=jsonp451&k=1&area=c2c&bucketid=4

        let o_box = document.querySelector('div');
        let o_txt = document.querySelector('input');
        // o_txt.onfocus = 
        o_txt.onkeyup = function(){
            //每次按下都清空一下页面的内容
            o_box.innerHTML = '';
            //动态创建script
            let o_scr = document.createElement('script');
            // o_scr.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1464,32328,31253,32723,7632,32115,32719,26350&wd=${this.value}&req=2&csor=2&pwd=y&cb=fn&_=1600947605280`;
            o_scr.src = `https://suggest.taobao.com/sug?code=utf-8&q=${this.value}&_ksTS=1600949240906_450&callback=fn&k=1&area=c2c&bucketid=4`;
            //把scrip标签放到head中
            document.head.appendChild(o_scr);
        }
        function fn(data){
            //回调函数带回来的数据打印一下，判断是什么类型的数据，然后确定要怎么获取

            //百度  把获取到的内容输入在ul li 中
            // console.log(data);  //对象
            //然后逐层找我们想要的数据
            // console.log(data.g);  //数组
            //遍历数组  
            // data.g.forEach((value) => {
            //     // console.log(value.q);  //我们想要的数据
            //     //创建li
            //     let o_li = document.createElement('li');
            //     o_li.innerHTML = '<a href="http://1000phone.com">' + value.q + '</a>';
            //     o_ul.appendChild(o_li);
            // })
            

            //淘宝
            // console.log(data);  //对象
            //然后逐层找我们想要的数据
            // console.log(data.result);  //数组
            //遍历数组  
            data.result.forEach((value) => {
                // console.log(value[0]);  //我们想要的数据
                o_box.innerHTML += '<a href="http://1000phone.com">' + value[0] + '</a>' + '<br>';
                // o_box.appendChild();
            })
        }
    </script>
</body>
</html>
易de
关注
专栏目录
promise-jsonp-s
05-16
a simple jsonp with promise实现：1.将jsonp转换为promise方式，可以用then()来处理结果，也可以用promise.all()并发请求2.代码是umd模式，无论在客户端还是node.js环境都可以使用APIpromiseJsonp(url, data)
Promise是什么？Promise怎么使用？回调地狱
jiang7701037的博客
10-19 1748
1、Promise的概念 Promise是ES6提供的原生的类（构造函数）， 用来传递异步操作的消息。它代表了某个未来才会知道结果的事件（通常是一个异步操作） 2、Promise的两个特点： 1）、对象的状态不受外界影响。 Promise 有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。 2）、一旦状态改变，就不会再变 状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Reje
Promise详解
lin1214000999的博客
04-19 2121
1.基本概念： Promise是JS异步编程中的重要概念， 异步抽象处理对象，是目前比较流行Javascript异步编程解决方案之一 2.Promise的三种状态： pending：对象初始化状态 fulfilled：当调用resolve(成功)，会由pending => fulfilled rejected：当调用reject(失败)，会由pending => rejected 3.创建Promise 3.1 new Promise(resolve, reject）； const pro
Jsonp和Promise-基础
xxzjwyql的博客
08-07 241
一、JSONP 什么是JSONP? （解决跨域访问问题） JSONP让网页从别的地址（跨域的地址）那获取资料，即跨域读取数据； JSONP实现跨域访问的原理 2.1在同一界面中可以定义多个script标签 2.2同一个界面中多个script标签中的数据可以相互访问 2.3可以通过script的src属性导入其它资源 2.4通过src属性导入其它资源的本质就是将资源拷贝到script标签中 2.5...
【精讲】封装Ajax，promise，json为一体的数据转换及获取数据步骤
m0_59505309的博客
07-19 1087
【精讲】封装Ajax，promise，json为一体的数据转换及获取数据步骤
JSONP&Promise
DingDing_Zhang的博客
07-30 193
ECMA-JSONP&Promise 1.JS跨文件访问【需求决定需要跨域】 根据JS的引入顺序，后引入的JS可以访问先引入JS内声明的全局变量或者函数 <!-- html文件 --> <script src="a.js"></script> <script src="a.js"></script> <!-- a.js文件 --> var num = 10; function fn(){ console.log(666
jsonp-promise:使用 Promise 的 webmodulesjsonp 的包装器
06-09
jsonp-promise 使用承诺的 webmodules/jsonp 的包装器 安装 使用安装： $ component install rangermauve/jsonp-promise 应用程序接口 var jsonp = require ( "jsonp-promise" ) ; jsonp ( "www.example.com" )...
jsonp-promise-pro:一个承诺的jsonp请求！
05-01
使用设置安装jsonp-promise-pro npm install jsonp-promise-pro --save范例程式码import jsonp from ' jsonp-promise-pro 'let options = { params:{ a : 1, b : 2 }, jsonp : ' callback ' , prefix : ' __jp ' , ...
uni-app封装请求完成示例项目
11-02
3. **错误处理统一**：使用Promise对uni.request进行封装，可以更方便地进行结果处理和错误捕获。Promise使得异步操作更加直观，同时可以链式调用，使得错误处理更加优雅。 4. **提高效率**：统一的请求管理可以更好...
simple-load-script:非常简单的基于Promise的脚本加载器和JSONP
05-01
简单加载脚本非常简单的基于Promise的脚本加载器和JSONP 基于承诺（ ） 使用addEventListener（IE9 +）安装npm install --save simple-load-script进口// es5 CommonJSconst loadScript = require ( 'simple-load-...
异步，json，Promise
最新发布
qq_52563729的博客
03-14 176
1
jsonp原理并用promise实现JSONP
weixin_41711709的博客
05-11 274
function jsonP(url, data) { return new Promise((reslove, reject) => { const dataString = url.indexOf('?') === -1 ? '?' : '&'; const callBack = `CB${new Date().getTime()}`; url += `${dataString}callBack=${callBack}`; if (.
ES6中 Promise 概念、基本用法和封装ajax（json数据使用）
yzq0820的博客
07-19 1782
一、定义 Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点： 1.对象的状态不受外界影响。 Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败），一旦发生改变就只有一种状态：Pending -> FulfilledPending -> Rejected。只有异步操作的结果，可以决定当前是哪一种状态，任何其...
JSONP原理及promise封装
青梅煮码
04-25 609
在我们想要获取其他网站数据的时候，浏览器的同源策略（Same origin policy）会禁止此项行为，但有时不得不实现这一操作，就会涉及跨域的问题。解决跨域也就成了前端必须掌握的技能，其中JSONP就是一种解决该问题的好方法。 一、JSONP跨域原理 由于script标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建script标签，然...
用promise实现可靠的jsonp插件
qq_21430819的博客
05-11 890
由于浏览器的同源策略禁止了跨域名调用，jsonp是一种跨域通信的手段，至于jsonp跨域原理，相信去百度应该会有一堆的答案，在这里我就不再多做阐述，下面直接上代码： function jsonp(options){ return new Promise((resolve,reject)=>{ let callbackID=`jsonp_${Date.now()}_${Math.cei...
Promise 的基础用法
热门推荐
Dreams of JAVAD
03-07 7万+
Promise 的含义 Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise 所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。 Promise ...
Promise对象
Sambeau
05-10 835
“同步模式”就是后一个任务等待前一个任务结束，然后再执行。 “异步模式”则每一个任务分成两段，第一段代码包含对外部数据的请求，第二段代码被写成一个回调函数，包含了对外部数据的处理。第一段代码执行完，不是立刻执行第二段代码，而是将程序的执行权交给第二个任务。等到外部数据返回了，再由系统通知执行第二段代码。
jsonp 跨域请求
promise_sun的博客
07-28 1166
json相信大家都用的多，jsonp我就一直没有机会用到，但也经常看到，只知道是“用来跨域的”，一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。 同源策略 首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。 1.随便建两个网页 一
Promise作用及跨域访问jsonp
Java_yangzhichao的博客
09-16 297
promise作用：实现多个回调函数的嵌套调用 使用语法： function f1(){ let p = new Promise(function(f){ f(); }); return p; } 1.promise对象通常放在一个函数体内 2.promise 会作为该函数的返回值 3.该函数调用结束后，通过then方法传入回调函数 then方法：promise对象.the（回调函数1，[回调函数2]） f1().then(f2).then(f3).then(f4
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值