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. BST和DST简单的matlab程序(图的广度和深度遍历)

    图的广度和深度遍历,具体内容教材有 clc;clear all;close all; %初始化邻接压缩表compressTable=[1 2;1 3;1 4;2 4;2 5;3 6;4 6;4 7]; ...

  2. iOS常见遍历方法汇总

    一.for循环 NSArray *iosArray = @[@"L", @"O", @"V", @"E", @" ...

  3. ASP.NET Core WebAPI实现本地化多语言(单资源文件)

    在Startup ConfigureServices 注册本地化所需要的服务AddLocalization和 Configure<RequestLocalizationOptions> p ...

  4. 使用shell发送邮件,方便快捷

    目录 前言 鉴赏代码 总结 前言 很多时候我们需要发送邮件,比如定时任务,比如邮件验证码等等. 各大编程语言都可以实现发送邮件功能,但还是太麻烦了,所以通过tcpdump抓包发现smtp发送邮件原理还 ...

  5. “体检医生”黑科技|让AI开发更精准,ModelArts更新模型诊断功能

    摘要:华为云AI开发平台ModelArts黑科技加持AI研发,让模型开发更高效.更简单,降低AI在行业的落地门槛.全面的可视化评估以及智能诊断功能,使得开发者可以直观了解模型各方面性能,从而进行针对性 ...

  6. ES标签搜索并解决评分排序问题

    一.概述 需求: 最近在做一个新闻项目,有这样一个需求,如下: 用户根据视频内容手动创建标签,标签个数不限 在视频详情页提供根据标签推荐视频功能,即按本视频的标签进行搜索,标签匹配多的排在前面,匹配少 ...

  7. 如何理解java枚举,看例子

    先来看一下不用枚举怎么表示常量: //常量类 class Num { public static String ONE = "ONE"; public static String ...

  8. 关于一台电脑使用多个GitHub账户管理代码的记录

    @参考原文 记录这个操作是因为需要将一些代码放出去到公共仓库上以便使用github pages线上预览今天页面的功能,但是碰到了一个很狗血的问题,虽然最后莫名其妙的解决了,但还是不知缘由,希望能在评论 ...

  9. 高并发之wait notify notifyAll原理详解

    public class WaitTest { public void testWait(){ System.out.println("Start-----"); try { wa ...

  10. Linux操作系统的文件目录结构

    一 --- 导读 首先记住一句经典的话:"linux世界中,万事万物皆为文件" 二---linux的目录结构示意图和windows下的目录结构示意图(本图需要背诵) 三---各目录 ...