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. js Table表格选中一行变色或者多选 并获取值

    使用JQ <script> let old, oldColor; $("#sp_body tr").click(function (i) { if (old) oldC ...

  2. 不同程序语言处理加密算法的性能对比(PHP/Golang/NodeJS)

    首先上我最常用且最易用的PHP来做下测试 <?php function test_encrypt($fun, $max) { $begin = microtime(TRUE); $pwdpre ...

  3. C#注册OCX控件

    注意 COM组件注册到注册表中的位置,是CLSID还是TypeLib 注册方法 代码执行 //声明注册方法 [DllImport("C:\\Windows\\barcodex.ocx&quo ...

  4. 版本控制比较cvs,svn,git

    版本控制比较cvs,svn,git 几个重要概念: 版本库模型(Repository model):描述了多个源码版本库副本间的关系,有客户端/服务器和分布式两种模式.在客户端/服务器模式下,每一用户 ...

  5. PIX

    [开启]后,如图: [新建]:如图中设定: Program: 你要准备监测的应用程序路径 [点击]:Start Experiment 如图,会出现一个新窗口(你运行的应用程序窗口) [点击F12](确 ...

  6. 关于ajax已经成功了,却报404的错误的问题

    经分析是请求没有返回状态码,这是因为我用的是SpringMVC框架,前后端使用JSON传递数据,因为返回的是对象,而忘记了添加 @ResponseBody 注解,所以 Spring对我的返回值进行了映 ...

  7. java中将从数据库查询的信息输出到excel文件中

    package com.cn.peitest.excel; import java.io.File; import java.lang.reflect.Field; import java.util. ...

  8. CentOS安装TensorFlow

    1.升级python 系统自带的python是2.6,不能用,升级到2.7,方法见:http://www.cnblogs.com/stAr-1/p/9055980.html 2.升级python带来的 ...

  9. FPT: Feature Pyramid Transfomer

    导言: 本文介绍了一个在空间和尺度上全活跃特征交互(fully active feature interaction across both space and scales)的特征金字塔transf ...

  10. 解决使用Navicat等工具进行连接登录mysql的1521错误,(mysql为8.0版本)

    mysql 8.0的版本的加密方式和以前的不一样,因此使用Navicat等工具进行连接的时候,会报1521的异常. 解决方法如下: 登录mysql的命令行工具,输入如下代码: ALTER USER ' ...