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. CentOS8 部署SqlServer

    官方文档https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-red-hat?view=sql-server-li ...

  2. ADO.NET 帮助类 参数传递 存储过程 分页

    SQLHelper public class SqlHelper { private readonly string _constr = ConfigurationManager.Connection ...

  3. Core3.0发布到IIS的流程

    前言 参考链接 https://www.cnblogs.com/wutongjun/p/11981798.html 在IIS上部署 .Net Core 3.0 项目的主要流程有: 安装并启用IIS 安 ...

  4. win10/win7下vs2013自带IISExpress支持局域网访问

    打开IISExpress安装目录(C:\Users\Administrator\Documents\IISExpress\config),一般为我的文档下,用记事本打开applicationhost. ...

  5. 如何做好Code Review

    Code Review(代码审查)很多团队都会做,效果如何不好说.如果你能轻易地从一堆出自正经团队之手的代码里找出几个低级错误,往往意味着团队管理者长期忽视了Code Review的重要性. 根据经验 ...

  6. flowable的多人会签和一票否决

    项目结构: 接下来代码: Duorenhuiqian.bpmn20.xml: <?xml version="1.0" encoding="UTF-8"?& ...

  7. java代理(静态代理和jdk动态代理以及cglib代理)

    版权声明:本文为Fighter168原创文章,未经允许不得转载.   目录(?)[+]   说到代理,脑袋中浮现一大堆代理相关的名词,代理模式,静态代理,jdk代理,cglib代理等等. 记忆特别深刻 ...

  8. 使用swagger上传文件

    经常使用swagger,可以通过设置[ProducesResponseType]标记接口的返回信息:swagger也能通过接口的参数列表,自动获得发送的数据结构信息. 不过有一个例外,就是上传文件的时 ...

  9. [LeetCode]Subtree of Another Tree判断一棵树是不是另一棵树的子树

    将树序列化为字符串,空节点用符号表示,这样可以唯一的表示一棵树. 用list记录所有子树的序列化,和目标树比较. List<String> list = new ArrayList< ...

  10. CentOS 8 安装Nginx

    安装命令: dnf install nginx -y 这就安装完成了 ,对你没看错一个命令就已经把nginx安装好了,不信你通过 nginx -V 命令查看. 常用操作: 1.nginx配置文件目录 ...