在 JavaScript 中,所有的代码都是单线程的,所谓的回调函数就是为了处理一些异步的操作。而多层的回调函数嵌套是一种比较古老的处理方式,这种代码的弊端显而易见,结构混乱、代码冗余,而 Promise 的出现就很好的解决了这个问题;

基本 Promise

function fn(n) {
return new Promise(function(resolve, reject) {
var nubmer = 0.5;
if (n > nubmer) {
resolve('greater than 0.5s')
} else {
reject('less than 0.5s')
}
})
} var p = fn(Math.random());
p.then((res) => {
console.log(res);
}).catch(err => {
console.log(err);
})

链式调用

var p = new Promise((resolve, reject) => {
console.log('start new Promise...');
resolve(10);
})
// 0.5秒后返回input*input的计算结果:
function multiply(input) {
return new Promise(function(resolve, reject) {
console.log('calculating ' + input + ' x ' + input + '...');
setTimeout(resolve(input * input), 500);
});
} // 0.5秒后返回input+input的计算结果:
function add(input) {
return new Promise(function(resolve, reject) {
console.log('calculating ' + input + ' + ' + input + '...');
setTimeout(resolve(input + input), 500);
});
}
p.then(multiply).then(add).then(res => {
console.log('Got value: ' + res);
}).catch(e => {
console.log(e);
}) // 得到结果
start new Promise...
calculating 10 x 10...
calculating 100 + 100...
Got value: 200

Promise 封装 Ajax

// ajax函数将返回Promise对象:
function ajax(method, url, data) {
var request = new XMLHttpRequest();
return new Promise(function(resolve, reject) {
request.onreadystatechange = function() {
if (request.readyState === 4) {
if (request.status === 200) {
resolve(request.responseText);
} else {
reject(request.status);
}
}
};
request.open(method, url);
request.send(data);
});
}
// 调用
var p = ajax('GET', url).then(function(text) { // 如果AJAX成功,获得响应内容
console.log(text);
}).catch(function(status) { // 如果AJAX失败,获得响应代码
console.log('ERROR: ' + status);
});

回调函数之基本的Promise的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼(缩略图的实现及异步处理、Promise、回调函数、监听的笔记)

    文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...

  2. 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  3. js中的回调函数 和promise解决异步操作中的回调地狱问题。

    回调函数 : 函数作为参数传递到另外一个函数中.简单数据类型和引入数据类型中的数组和对象作为参数传递大家肯定都不陌生,其实引用数据类型中的函数也是可以的. 事实上大家见到的很多,用到的也很多,比如jQ ...

  4. promise对象的回调函数resolve的参数为另一个promise对象

    /*如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数. reject函数的参数通常是Error对象的实例,表示抛出的错误: resolve函数的参数除了正常的值 ...

  5. Promise对象和回调函数,解决异步数据传递问题

    下面的代码例子,均已小程序的异步请求数据为案例来说明 1.利用回调函数,来解决异步数据传递问题 异步操作api.js const getBooks = (url, callback) => { ...

  6. Promise对象的resolve回调函数和reject回调函数使用

    Promise是ES6中用来结局回调地狱的问题的但是并不能帮我们减少代码量 Promise是一个构造函数 new Promise() 得到一个Promise一个实例 在Promise上有两个函数分别是 ...

  7. js中回调函数,promise 以及 async/await 的对比用法 对比!!!

    在编程项目中,我们常需要用到回调的做法来实现部分功能,那么在js中我们有哪些方法来实现回调的? 方法1:回调函数 首先要定义这个函数,然后才能利用回调函数来调用! login: function (f ...

  8. 异步编程(回调函数,promise)

    一.回调函数 ①概念:一般情况下,程序会时常通过API调用库里所预先备好的函数.但是有些库函数却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务.这个被传入的.后又被调用的函数就称为回调函 ...

  9. 回调函数 和 promise对象,及封装API接口

    1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...

随机推荐

  1. Unity3d学习日记(六)

      今天在研究怎么在unity中将image上的图片保存到本地,主要参考下面两个链接:Unity Texture2D缩放.UNITY存储图片到本地   结合上述两个链接,我写了如下代码来将缩放后或者改 ...

  2. Hadoop初探

    本文转自:https://blog.csdn.net/column/details/14334.html 前言 Hadoop是什么? 用百科上的话说:“Hadoop是一个由Apache基金会所开发的分 ...

  3. 一个flume agent异常的解决过程记录

    今天在使用flume agent的时候,遇到了一个异常,  现把解决的过程记录如下: 问题的背景: 我使用flume agent 来接收从storm topology发送下来的accesslog , ...

  4. Java并发编程中的设计模式解析(一)

    Java并发编程,除了被用于各种Web应用.分布式系统和大数据系统,构成高并发系统的核心基础外,其本身也蕴含着大量的设计模式思想在里面.这一系列文章主要是结合Java源码,对并发编程中使用到的.实现的 ...

  5. Java容器深入浅出之Map、HashMap、Hashtable及其它实现类

    在Java中,Set的底层事实上是基于Map实现的,Map内部封装了一个Entry内部接口,由实现类来封装key-value对,当value值均为null时,key的集合就形成了Set.因此,Map集 ...

  6. MacOS & dock 工具栏 & 外接显示器 & 主屏

    MacOS & dock 工具栏 & 外接显示器 & 主屏 macos 如何将 dock工具栏从外接显示器拖回主屏 https://support.apple.com/zh-c ...

  7. python利用unittest测试框架组织测试用例的5种方法

    利用unittest测试框架可以编写测试用例,执行方式分两大类:利用main方法和利用testsuite,其中利用测试套件来组织测试用例可以有4种写法. 在此之前,先了解几个概念 TestCase:所 ...

  8. BZOJ2806_Cheat

    Ctsc2012的题目.做完感觉自己瞬间变高富帅了. 不过回想其实也觉得不难,想到用单调队列就很简单了,还有二分= =.呵 对于给出的一篇文章,如果你们将它分成若干段,并在所有长度不小于L的片段在字典 ...

  9. P4910 帕秋莉的手环

    题目背景 帕秋莉是蕾米莉亚很早结识的朋友,现在住在红魔馆地下的大图书馆里.不仅擅长许多魔法,还每天都会开发出新的魔法.只是身体比较弱,因为哮喘,会在咏唱符卡时遇到麻烦. 她所用的属性魔法,主要是生命和 ...

  10. Java IO流学习总结 - BIO

      Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据 ...