测试Promise与Async/await的基本使用
想在项目中用, 发现自己不是很熟
promise基本使用
基本使用-思路
new Promise()
返回了一个状态机- 一个完全无法被外界影响的状态机
- 构造函数, 传入一个函数, 两个参数, 分别是
reslove, reject
- 表示执行的回调函数, 也就是
.then()
,.cache()
函数 - 达到内部调用外部函数的作用, 行程异步
function init () {
var p = new Promise((resolve, reject) => {
reject(new Error(1))
})
p.then(a => {
console.log(a)
}).catch(b => {
console.log(b)
})
console.log(p)
}
init()
基本使用-注意事项
- 命名不可错误
- reject回调函数中, 尽量放入一个
new Error
- 如果直接在
new Promise()
的构造函数中,throw new Error()
- 也不会触发程序的停止, 而是被外面的
.cache()
所捕获 - 如果函数没有进行
.cache()
的话, 会抛出异常 - 但不会影响其他程序的执行
function init () {
var p = new Promise((resolve, reject) => {
throw new Error(1)
})
p.then(a => {
console.log(a)
}).catch(e => {
console.log(e) // Error: 1
})
}
init()
function init () {
var p = new Promise((resolve, reject) => {
throw new Error(1)
})
var p1 = new Promise((resolve, reject) => {
resolve(1)
})
p.then(a => {
console.log(a)
})
p1.then(a => {
console.log(a)
})
setTimeout(() => {
console.log(3)
}, 1000)
}
init()
console.log(2)
// 2
// 1
// Error: 1(抛出异常)
// (1s之后)
// 3
async函数
async函数-直接返回new Promise
- async 函数直接返回了新new的Promise
async function a () {
return new Promise((resolve, reject) => {
resolve(2)
})
}
function init () {
setTimeout(() => {
console.log(0)
}, 0)
var p = a()
p.then(a => {
console.log(a)
})
console.log(1)
}
init()
// 1
// 2
// 0
- 测试
new Promise中抛出错误, 是否影响执行
async function a () {
return new Promise((resolve, reject) => {
throw new Error(2)
})
}
function init () {
setTimeout(() => {
console.log(0)
}, 0)
var p = a()
p.then(a => {
console.log(a)
})
console.log(1)
}
init()
// 1
// 报错: Uncaught (in promise) Error: 2
// 0
async/await测试
await的基本使用
- await返回的不再是Promise
async function a () {
return new Promise((resolve, reject) => {
resolve(1)
})
}
async function init () {
setTimeout(() => {
console.log(0)
}, 0)
var p = await a()
p.then(a => {
console.log(a)
})
console.log(1)
}
init()
// Uncaught (in promise) TypeError: p.then is not a function
// 0
- 使用reslove返回正确的结果
async function a () {
return new Promise((resolve, reject) => {
resolve(2)
})
}
async function init () {
setTimeout(() => {
console.log(0)
}, 0)
console.log(1)
var p = await a()
console.log(p)
}
init()
// 1
// 2
// 0
- 如果在
new Promise
的时候, 发生错误, 需要捕获await
async function a () {
return new Promise((resolve, reject) => {
throw new Error('err') // reject(new Error('err')) 同样的效果
})
}
async function init () {
try {
var p = await a()
} catch (err) {
console.log(err)
}
console.log(p)
}
init()
// Error: err
// undefined
- 可以在trycache的时候, 捕获了再抛出
- 若外边的函数, 未进行捕获处理, 将影响程序执行
async function a () {
return new Promise((resolve, reject) => {
try {
throw new Error('err')
} catch (error) {
reject(error)
}
})
}
async function init () {
var p = await a()
console.log(p)
}
init()
// 报错: Uncaught (in promise) Error: err
// 并且程序不会再继续执行
- 未使用async函数, 直接返回不是Promise的值, 接await可以直接输出
async function a () {
return 2
}
async function init () {
var p = await a()
console.log(p)
}
init()
- 只要使用了await就需要等待执行完, 返回了结果
async function a () {
var p = await b()
console.log(p)
return 'p'
}
async function b () {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 2000)
})
}
async function init () {
var p = await a()
console.log(p)
}
init()
// (2s)
// 1
// 'p'
测试Promise与Async/await的基本使用的更多相关文章
- Promise及Async/Await
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- 异步Promise及Async/Await可能最完整入门攻略
此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...
- Promise和async await详解
本文转载自Promise和async await详解 Promise 状态 pending: 初始状态, 非 fulfilled 或 rejected. fulfilled: 成功的操作. rejec ...
- node.js异步控制流程 回调,事件,promise和async/await
写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...
- Promise, Generator, async/await的渐进理解
作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...
- 异步操作之 Promise 和 Async await 用法进阶
ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...
- callback vs async.js vs promise vs async / await
需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...
- Callback, Promise和Async/Await的对比
Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...
随机推荐
- Spring在Thread中注入Bean无效的解决方式
在Spring项目中,有时需要新开线程完成一些复杂任务,而线程中可能需要注入一些服务.而通过Spring注入来管理和使用服务是较为合理的方式.但是若直接在Thread子类中通过注解方式注入Bean是无 ...
- 关于MQ的几件小事(七)如果让你设计一个MQ,你怎么设计
其实回答这类问题,说白了,起码不求你看过那技术的源码,起码你大概知道那个技术的基本原理,核心组成部分,基本架构构成,然后参照一些开源的技术把一个系统设计出来的思路说一下就好 比如说这个消息队列系统,我 ...
- C#/.net 通过js调用系统相机进行拍照,图片无损压缩后进行二维码识别
这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...
- vue网络不好时不间断请求
配置默认参数 const { apiConfig: { timeout, retry, retryDelay } } = config; if(timeout) axios.defaults.time ...
- jQuery获取的dom对象和原生的dom对象有何区别
js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...
- mydql 函数和存储过程
存储过程 CREATE PROCEDURE getUid (IN phone CHAR(11), OUT uid INT ) READS SQL DATA BEGIN select u.id from ...
- try,except,finally的用法
try,except,finally try...except形式:指定一个或多个异常处理器(异常子句).. 当在try子句中没有异常发生时,,异常处理器将不被执行. 当在try子句中有异常发生时,首 ...
- boost交叉编译
运行bootstrap.sh # ./bootstrap.sh 生成b2.bjam和project-config.jam文件 修改project-config.jam using gcc : arm ...
- Marketing Cloud里取得系统contact数目的API
Marketing Cloud里的Contact标准tile(下图红色tile)上是没有当前系统contact数字显示的,请对比profile tile(下图黑色tile). 客户有需求希望在Laun ...
- VIM从原理上认识^M问题
问题背景 VIM在打开文件的时候如果遇到两种换行符风格(dos与unix)共存的文件,通常会在行尾显示出烦人的^M.如果^M较少,比较容易定位到哪几行出了问题,但是如果^M较多,就很难搞.下面先给出解 ...