在 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. 谈谈Keil 中C51的内存分配与优化

    本帖最后由 Cresta 于 2014-1-21 10:49 编辑 看到这篇C51的内存分配和优化的文章,个人觉得分析的十分到位,在这里转给大家   C51的内存分配不同于一般的PC,内存空间有限,采 ...

  2. HDU 2109 Fighting for HDU

    http://acm.hdu.edu.cn/showproblem.php?pid=2109 Problem Description 在上一回,我们让你猜测海东集团用地的形状,你猜对了吗?不管结果如何 ...

  3. python 9*9乘法口诀表

    # -*- coding: utf-8 -*- # __author__ = 'Carry' for i in range(1, 10): for j in range(1, i + 1): prin ...

  4. win7右下角的同步中心怎么去除

    “开始”-“运行”-“regedit”,在“HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Syncmgr\Handlers” ...

  5. Codeforces 914F. Substrings in a String(bitset)

    比赛的时候怎么没看这题啊...血亏T T 对每种字符建一个bitset,修改直接改就好了,查询一个区间的时候对查询字符串的每种字符错位and一下,然后用biset的count就可以得到答案了... # ...

  6. Win10不能将文件夹固定到任务栏

    Win10无法将文件夹锁定到任务栏的解决方法:   1.点开始——在运行里输入%APPDATA%\Microsoft\Windows\Recent\AutomaticDestinations,按回车键 ...

  7. golang json 编码解码

    json 编码 package main import ( "encoding/json" "fmt" ) type Person struct { Name ...

  8. bzoj 2120

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 6430  Solved: 2562[Submit][Status][Discuss] ...

  9. sort 与 sorted 区别

    sort 与 sorted 区别: sort 只是应用在 list 上的方法,(就地排序无返回值). sorted 是内建函数,可对所有可迭代的对象进行排序操作,(返回新的list). 语法 sort ...

  10. python【内置函数&自定义函数】

    =========================random函数:=======================