* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的通知机制。 异步:当事情处理完成后被请求者会发信息通知请求者该事情处理完成。在这期间被请求者可以选择是继续等待命令请求完成还是去做其他事等待被请求者返回。 同步:当事情处理完成后被请求者不会告知请求者,等到请求者发来询问是才会告知 阻塞;非阻塞 指的是请求者 阻塞:针对请求者来说的,委托其他人处理一些事情的时候,被请求者是等待请求处理完成还是继续向下执行其他任务。阻塞就是等待事情完成才继续执行 非阻塞:针对请求者来说,请求者委托被请求者处理一些事情时不等被请求者答案先去做其他事,并且每隔一段时间询问被请求者该事件是否完成。 js采用的是异步非阻塞模式。 promise 是一个构造函数(在什么时候要用promise当我们进行一些操作需要同步进行时) 通过new promise进行调用 Promise: * 构造函数 * new Promise(callback) * callback: 要异步处理的任务 通过Promise构造函数得到一个Promise对象,我们传入的callback将会被Promise对象所执行 * Promise会维护一个任务状态,这个状态是一个Promise内部的属性 * [[PromiseStatus]] * 该属性一共有三个值 * 1. pending : 正在处理,Promise对象一旦被创建就会更改为该状态,他是默认值 * 2. resolved : 处理完成 * 3. rejected : 处理失败 * resolved,rejected这两个状态是需要靠我们手动去维护的。因为异步任务的结果是成功还是失败,是由我们的具体业务所决定的,Promise对象是没有办法确定的。
      我们需要在我们业务处理中,去根据实际情况改变Promise对象的状态
*  改变Promise状态
* 当我们把一个callback函数传递给Promise对象的时候,Promise对象会去执行该callback函数,同时,还会传递两个参数给这个callback,所以,我们可以在callback函数接收这两个参数
* 这两个参数都是一个函数
* resolve
* 当我们调用该函数的时候,会把当前的Promise对象的状态改成resolved
* reject
* 当我们调用该函数的时候,会把当前的Promise对象的状态改成rejected
*
* Promise对象还有一个方法:then
* 该方法接收两个参数,这两个参数都是callback函数,这两个callback不会立即执行,当Promise的状态一旦发生改变就会执行then方法中传入的函数,有点类似事件绑定
* 当Promise状态变成resolved,那么执行then的第一个参数callback
* 当Promise状态变成rejected,那么执行then的第二个参数callback

举列:现在我们有一个延时定时器setTimeout 如下
var a=10;
setTimeout(()=>{
a+=10;
},1000);
console.log(a);//此时a打印出来为10 因为在js为异步非阻塞的语言 在延时定时器中的函数还没有执行的时候下面的console.log就已经执行完毕所以打印出来为10 。
那么我们想得到延时定时器处理后的值可以这么做。
var a=10;
var p1=new Promise((resolve,reject)=>{
setTimeout(()=>{
a+=10;
resolve(err)//处理完成
},1000);//只有当处理完成之后才会执行then中的函数 此时resolve()中的东西为then的传参。
})
p1.then(()=>{
console.log(a)
});
此时打印出来的就是20.

列2 promise

then方法如何传递数据
* 我们可以通过resolve,reject方法来传递数据
* 我们只要在调用上面两个函数的时候,把需要传递给后续的then方法的数据作为其参数就可以
* catch也是类似catch方法就是捕获在promise的then中又传递了promise这样多个嵌套的话 拿 then 的 方法来监听太过繁琐 catch 监听 主要有一个执行错误就会被catch捕获从而执行catch中的函数
* */
new Promise((resolve, reject) => { let b = 10; setTimeout(() => {
b += 10;
resolve(b);
// reject('第一个任务出错了');
}, 1000); }).then(function(b) {
console.log(b);
return new Promise((resolve, reject) => {
setTimeout(() => {
b *= 2;
resolve(b);
// reject('第二个任务出错了');
}, 1000);
});
}).then(function(b) {
console.log(b);
return new Promise((resolve, reject) => {
setTimeout(() => {
b *= b;
resolve(b);
reject('第三个任务出错了');
}, 1000);
});
}).then(function(b) {
console.log(b);
}).catch(function(err) {
console.log(err);
});

promise的all方法

有的时候在一个Promise任务中需要处理多个异步任务,那这多个异步的任务是同时执行的,但是执行时间有是不确定的。后续的任务需要这几个异步任务全部完成以后再执行,那么就需要用到Promise中提供的all方法来实现

 var p1 = new Promise((resolve, reject) => {
let a = 1;
setTimeout(() => {
a++;

// reject('one'); resolve(a); }, Math.random() * 1000); });

var p2 = new Promise((resolve, reject) => {
let b = 2;
setTimeout(() => {
b++;
resolve(b);
}, Math.random() * 1000);
}); /*
* 把两个不同的异步任务分别包装在一个Promise对象中,然后调用Promise对象静态方法all,把上面多个不同异步Promise作为数组传递给all方法的参数
* 这个时候Promise.all方法中会维护一个状态,这个状态是根据传入的多个异步任务的状态共同决定的
* 当多个异步任务的状态都变成了resolved,那么all的状态才是resolved,但是只要有一个异步任务的状态变成了rejected,那么all的状态就会变成rejected
* */
p1 p2 是两个promise 在下面的方法中只有当p1 p2 都为resolved的时候才会执行下面的函数方法
Promise.all([p1, p2]).then(([a, b]) => {
console.log(a, b);
}).catch((err) => {
console.log(err);
})

promise 的另一种方法 await async

await async 是es7 定义的新标准

    通过 async 声明一个异步函数在该函数中 

    async function(){

        await fn1 //这个fn1 代表一个函数

        await fn2//这样的话在fn1 执行完成之后才会执行fn2

    }

promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解的更多相关文章

  1. js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

  2. 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

  3. 互联网我来了 -- 2. js中"异步/堵塞"等概念的简析

    一.什么是"异步非堵塞式"? 这个名字听起来非常恶心难懂,但假设以 买内裤 这件事情来比喻运行程序的话就非常easy理解"异步非堵塞式"的涵义了. 比如你是一个 ...

  4. JS中的异步以及事件轮询机制

    一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步 ...

  5. JS中的异步与回调

    问题的引出:在js中使用异步调用时,有可能会出现在异步的回调函数中设置调用之外的变量值,但在异步调用完成后去使用变量,却发现这些变量值并没有被成功设置的情况.如: google map中的地理编码,地 ...

  6. js中的异步[Important]

    js作为前端最主流的语言,主要处理页面显示变化(mutation)和异步(asynchronicity), js语言的基本要素和使用惯例的演化大都围绕着这两大主题,两者均值得总结和思考的主题, 这里先 ...

  7. JS中的异步

    Hello,日常更新的我“浪”回来了!!! JS中有三座高山:异步和单线程.作用域和闭包.原型原型链 今天“浪”的主题是JS中的异步和单线程的问题. 主要从这三个方面入手 一.什么是异步(与同步作比较 ...

  8. Netty 中的异步编程 Future 和 Promise

    Netty 中大量 I/O 操作都是异步执行,本篇博文来聊聊 Netty 中的异步编程. Java Future 提供的异步模型 JDK 5 引入了 Future 模式.Future 接口是 Java ...

  9. js浮点数精度丢失问题及如何解决js中浮点数计算不精准

    js中进行数字计算时候,会出现精度误差的问题.先来看一个实例: console.log(0.1+0.2===0.3);//false console.log(0.1+0.1===0.2);//true ...

随机推荐

  1. 用js来实现那些数据结构(数组篇01)

    在开始正式的内容之前,不得不说说js中的数据类型和数据结构,以及一些比较容易让人混淆的概念.那么为什么要从数组说起?数组在js中是最常见的内存数据结构,数组数据结构在js中拥有很多的方法,很多初学者记 ...

  2. C语言助教批改

    作业批改 每次作业批改后写一篇作业点评,助教轮流写作业总结.(总结分工老师安排). 每个助教点评自己负责的同学博客,点评要详细,不能只有一句话. 有比较优秀博客请或典型问题推荐到qq群,并发给写总结助 ...

  3. C语言--函数嵌套

    一.实验作业 注意: 1.可以先初始化2个结构体数组数据以便测试. 2.要求用模块化方式组织程序结构,合理设计各自定义函数.同时,程序能够进行异常处理,检查用户输入数据的有效性,用户输入数据有错误,如 ...

  4. 实验四Java Android简易开发

    实验准备 Android Studio下载 Android Studio安装 实验内容 Android Stuidio的安装测试 Android Stuidio的安装测试: 参考<Java和An ...

  5. 项目Alpha冲刺Day5

    一.会议照片 二.项目进展 1.今日安排 熟悉后台框架并尝试编写及继续搭建前台框架模版.完成登录相关的功能实现,添加一些用户相关的单元测试代码,以及相应的测试数据. 2.问题困难 前端不是很熟,页面框 ...

  6. Git学习使用

    1.注册码云并建立远程仓库 2.安装git 3.使用eclipse egit 推送以及克隆 建立本地仓库,成功后如图 推送项目至本地仓库与远程仓库 使用右键菜单team-share 选项,与仓库关联后 ...

  7. 算法第四版学习笔记之优先队列--Priority Queues

    软件:DrJava 参考书:算法(第四版) 章节:2.4优先队列(以下截图是算法配套视频所讲内容截图) 1:API 与初级实现 2:堆得定义 3:堆排序 4:事件驱动的仿真 优先队列最重要的操作就是删 ...

  8. Linux安装mongodb总结

    由于自己的博客上线部署时需要用到mongodb来存储图片文件,所以先在本地电脑上安装了mongodb做测试,由于之前没接触过mongodb,所以安装过程中遇到了各种小问题,折腾了好久终于安装好并成功启 ...

  9. vue class与style 绑定详解——小白速会

    一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...

  10. 3-51单片机WIFI学习(开发板8266底层源码介绍)

    上一篇链接  http://www.cnblogs.com/yangfengwu/p/8743502.html 直接上源码:注意源码有两部分,第一部分是一开始的时候写在模块内部的,另一部分是存在手机内 ...