想在项目中用, 发现自己不是很熟

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的基本使用的更多相关文章

  1. Promise及Async/Await

      一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪 ...

  2. 异步Promise及Async/Await最完整入门攻略

    一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...

  3. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  4. Promise和async await详解

    本文转载自Promise和async await详解 Promise 状态 pending: 初始状态, 非 fulfilled 或 rejected. fulfilled: 成功的操作. rejec ...

  5. node.js异步控制流程 回调,事件,promise和async/await

    写这个问题是因为最近看到一些初学者用回调用的不亦乐乎,最后代码左调来又调去很不直观. 首先上结论:推荐使用async/await或者co/yield,其次是promise,再次是事件,回调不要使用. ...

  6. Promise, Generator, async/await的渐进理解

    作为前端开发者的伙伴们,肯定对Promise,Generator,async/await非常熟悉不过了.Promise绝对是烂记于心,而async/await却让使大伙们感觉到爽(原来异步可以这么简单 ...

  7. 异步操作之 Promise 和 Async await 用法进阶

    ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...

  8. callback vs async.js vs promise vs async / await

    需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = functio ...

  9. Callback, Promise和Async/Await的对比

    Callback, Promise和Async/Await的对比 Callback Hell getData1(function (data1) { console.log('我得到data1了') ...

随机推荐

  1. Spring在Thread中注入Bean无效的解决方式

    在Spring项目中,有时需要新开线程完成一些复杂任务,而线程中可能需要注入一些服务.而通过Spring注入来管理和使用服务是较为合理的方式.但是若直接在Thread子类中通过注解方式注入Bean是无 ...

  2. 关于MQ的几件小事(七)如果让你设计一个MQ,你怎么设计

    其实回答这类问题,说白了,起码不求你看过那技术的源码,起码你大概知道那个技术的基本原理,核心组成部分,基本架构构成,然后参照一些开源的技术把一个系统设计出来的思路说一下就好 比如说这个消息队列系统,我 ...

  3. C#/.net 通过js调用系统相机进行拍照,图片无损压缩后进行二维码识别

    这两天撸了一个需求,通过 JS  调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析 ...

  4. vue网络不好时不间断请求

    配置默认参数 const { apiConfig: { timeout, retry, retryDelay } } = config; if(timeout) axios.defaults.time ...

  5. jQuery获取的dom对象和原生的dom对象有何区别

    js原生获取的dom是一个对象,jQuery对象就是一个数组对象,其实就是选择出来的元素的数组集合,所以说他们两者是不同的对象类型不等价 原生DOM对象转jQuery对象 var box = docu ...

  6. mydql 函数和存储过程

    存储过程 CREATE PROCEDURE getUid (IN phone CHAR(11), OUT uid INT ) READS SQL DATA BEGIN select u.id from ...

  7. try,except,finally的用法

    try,except,finally try...except形式:指定一个或多个异常处理器(异常子句).. 当在try子句中没有异常发生时,,异常处理器将不被执行. 当在try子句中有异常发生时,首 ...

  8. boost交叉编译

    运行bootstrap.sh # ./bootstrap.sh 生成b2.bjam和project-config.jam文件 修改project-config.jam using gcc : arm ...

  9. Marketing Cloud里取得系统contact数目的API

    Marketing Cloud里的Contact标准tile(下图红色tile)上是没有当前系统contact数字显示的,请对比profile tile(下图黑色tile). 客户有需求希望在Laun ...

  10. VIM从原理上认识^M问题

    问题背景 VIM在打开文件的时候如果遇到两种换行符风格(dos与unix)共存的文件,通常会在行尾显示出烦人的^M.如果^M较少,比较容易定位到哪几行出了问题,但是如果^M较多,就很难搞.下面先给出解 ...