1.概述

Promise是一步编程的一种解决方案,从语法上讲,promise是一个对象,从它可以获取异步的问题

Promise的优点:

可以避免多次异步调用嵌套导致的回调地域

提供了简洁的api,使得控制异步变得简单更加容易

详细promise使用规则https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

2.使用

实例化Promise对象,构造函数中传递参数,该函数用于传递异步任务

resolve和reject两个参数用于 处理成功和失败的两种情况,并通过p.then获取处理结果

代码实列:

 1   var p = new Promise(function (resolve, reject) {
2 //用于实现异步任务
3 setTimeout(function () {
4 var flag = true
5 if (flag) {
6 resolve('成功')
7 } else {
8 reject('失败')
9 }
10 })
11 },1000)
12 p.then(function (success) {
13 //这里面是成功了要执行的操作
14 console.log(success);
15 },
16 function (error) {
17 //这里面是失败了要进行的操作
18 console.log(error);
19 })

3.使用Promise发送Ajax请求

先封装一个函数,可以重复调用。

 1
 //     })
        function P(url) {
            var p = new Promise(function (resolve, reject) {
                var xhr = new XMLHttpRequest()
                xhr.open('get', url, true)
                xhr.onreadystatechange = function (res, req) {
                    if (req.status === 200) {
                        resolve(req.responseText)
                    } else {
                        reject('错误')
                    }
                }
                xhr.send()
            })
        }
        var URL = "api地址";
        P(URL).then(function onFulfilled(value) {
            console.log(value);
        }).catch(function onRejected(error) {
            console.log(error);
        });

4.Promise的实列方法

p.then()得到异步任务的正确结果

p.catch()获取异常信心

p.finally()无论正确还是错误都会执行(不是正式版本)

1   P().then(function (data) {
2 console.log(data);
3 })
4 P().catch(function (data) {
5 console.log(data);
6 })
7 p().finally(function (data) {
8 console.log(data);
9 })

5.Promise的对象方法

Promise.all()并发处理多个任务,所有任务都执行完成才能得到结果

Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果

all用法

1  var a=p(url1)
2 var b=P(url2)
3 var c=P(url3)
4 Promise.all([a,b,c]).then(function(data){
5 console.log(data);
6 })

控制台得到的data是三个实列都执行完成后才会输出log

race用法

1   var a = p(url1)
2 var b = P(url2)
3 var c = P(url3)
4 Promise.race([a, b, c]).then(function (data) {
5 console.log(data);
6 })

其中只要有一个实列执行完成后就会输出log,用法跟all相同,只不过执行条件不同

Promise用法的更多相关文章

  1. c/c++ 多线程 等待一次性事件 std::promise用法

    多线程 等待一次性事件 std::promise用法 背景:不是很明白,不知道为了解决什么业务场景,感觉std::async可以优雅的搞定一切的一次等待性事件,为什么还有个std::promise. ...

  2. ES6语法 promise用法

    ES6语法 promise用法 function doSomething(){ return new Promise((resolve,reject)=>{ resolve('jjjj');// ...

  3. es6的promise用法详解

    es6的promise用法详解 promise 原理 promise是es6的异步编程解决方案, 是es6封装好的对象: 一个promise有三种状态:Pending(进行中).Resolved(已完 ...

  4. [WinJS] Promise 用法

    初学 WinJS, 可能对 Promise 的用法不大清楚,本文简要说明一下 WinJS中 promise 的基本用法. 主要参考自:http://try.buildwinjs.com/#promis ...

  5. Es6 Promise 用法详解

     Promise是什么??    打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方 ...

  6. ES6 Promise 用法讲解

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  7. Promise 用法

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 Promise的构造函数接收一个参数,是 ...

  8. ES6 Promise用法讲解

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. ES6 规定,Promise对象是一个构造函数,用来生成Promise实例. 下面代码创造了一个 ...

  9. ES6 Promise 用法转载

    Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法. 那就new一个 var p = new Promise( ...

  10. promise用法详解

    es6的promise可谓是异步书写的一大福音,过去异步js书写是函数嵌套函数的方式,promise出现后书写异步js代码就变得美观得多了 以前的写法:回调函数不停嵌套 ajax('/banners' ...

随机推荐

  1. .net MVC 微信公众号 点击菜单拉取消息时的事件推送

    官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141016&token=&lang=zh_CN ...

  2. Hyperledger fabric 链码篇GO(四)

    Hyperledger fabric 链码篇GO(四) fabric中的链码也就是我们区块链所认知的智能合约,fabric中可由nodejs,java,go编写,本篇只针对GO语言编写链码.将详细介绍 ...

  3. 阿里云ssl证书过期怎么解决 (免费SSL证书) 三步解决

    阿里云ssl证书过期怎么解决(免费SSL证书),三步解决 使用免费的SSL证书网站  https://ohttps.com 1.注册帐号 2.申请证书 3.部署到阿里云 4.注意事项 1.注册帐号 到 ...

  4. 【STL 源码剖析】浅谈 STL 迭代器与 traits 编程技法

    大家好,我是小贺. 点赞再看,养成习惯 文章每周持续更新,可以微信搜索「herongwei」第一时间阅读和催更,本文 GitHub : https://github.com/rongweihe/Mor ...

  5. 我的开源项目在五个月内超过了 600 star

    其实我在 2016 年年底就开始写了这个项目:Forest,一个能够将 HTTP 的所有请求信息(包括 URL .Header 以及 Body 等信息)绑定到您自定义的 Interface 方法上,能 ...

  6. 分享一个的c++写的,模仿awk的框架类CAwkDoc

    这是我好多年前,模仿awk写的. awk大家都比较熟悉,使用awk处理文件,读取文件,分割字段这些工作awk自己帮你实现了. 程序员只要编写业务逻辑代码,并且awk还提供了很多常用的字符串操作函数,可 ...

  7. 避坑 | Java8使用并行流(ParallelStream)注意事项

    示例分析 /** * 避坑 | Java8使用并行流(ParallelStream)注意事项 * * @author WH.L * @date 2020/12/26 17:14 */ public c ...

  8. Lesson_strange_words4

    mount on 安装 arc 弧 actuator 马达,致动器:调节器 roughly 大致,大约 radially 径向,放射状 stepper 步进机 motor 电机,发动机 sequent ...

  9. 如何使用蓝湖设计稿同时适配PC及移动端

    如何使用蓝湖设计稿同时适配PC及移动端 项目需求: 一套代码同时适配PC及移动端 方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换 坑: 尝试过使用post ...

  10. Java 中 Executors.newSingleThreadExecutor() 与Executors.newFixedThreadPool(1)有什么区别

    在研究Executors提供的线程池时自然会想到标题这个问题,既然已经有了newFixedThreadPool,为什么还要存在newSingleThreadExecutor这个方法.难道newFixe ...