资讯专栏INFORMATION COLUMN

这样理解 promise

liangzai_cool / 1575人阅读

摘要:函数会在异步操作成功完成时被调用,并将异步操作的返回值作为参数传递到外部。方法的返回值方法总是返回一个新的对象,多次调用方法,默认返回一个一个空的对象使用来来返回。

promise是什么

官网解释 promise 表示一个异步操作的最终结果。

翻译 ==可以将promise理解为一个状态机==,它存在三种不同的状态,并在某一时刻只能有一种状态

pending 表示还在执行

resolved 执行成功

rejected 执行失败

一个promise是对一个异步操作的封装,异步操作有等待完成、成功和失败三种可能的结果,对应了promise的三种状态。

promise的状态只能有pending转换位resolved或者pending转换为rejected,一旦状态转化完成就无法再改变。

假设我们用promise封了一个异步操作,那么当它被创建的时候就处于pending状态,当异步操作成功完成时,
我们将状态转换为resolved,如果执行中出现错误,将状态转换为rejected。

var promise=new Promise(function(resolve,reject){
  // code
  if(){
    /*异步操作成功 */
    resolve(value)
  }else{
    reject(error)
  }
})
使用then方法获取结果
var fs=require("fs")
function readFile_promise(path){
  return new Promise(function(resolve,reject){
    fs.readFile(path, "utf-8",function(err,data){
      if(data){
        resolve(data)
      }else{
        reject(err)
      }
    })
  })
}

var result=readFile_promise("./1.txt")
result.then(function(value){
  //success
  console.log("success", value)
},function(error){
  //failure
  console.log("failure",error)
})
// 将一个异步函数封装成promise,只要在回调函数中针对不同的返回结果调用resolve或者reject方法。

// resolve函数会在异步操作成功完成时被调用,并将异步操作的返回值作为参数传递到外部。
// reject是在异步操作出现异常时被调用,会将错误信息作为参数传递出去。
then方法的返回值

then方法总是返回一个新的promise对象,多次调用then方法,默认返回一个一个空的promise对象
使用return来来返回。

var promise=readFile_promise("./foo.txt")
promise.then(function(value){
  //success
  console.log("success", value) // foo
  return readFile_promise("./bar.txt")
},function(error){
  //failure
  console.log("failure",error)
}).then(function(value){
  console.log("then", value) // bar
})
promise的执行

虽然我们是通过then方法来获取promise的结果,但是promise是当then方法调用之后才执行吗?

var promise=new Promise((resolve, reject)=>{
  console.log("begin")
  resolve()
})

setTimeout(()=>{
  promise.then(()=>{
    console.log("end")
  })
},5000)
// 开始begin 5s后end
// 运行顺序是,当promise从被创建的那一刻起就开始执行了,then方法只是提供了访问promise状态的接口,与promise的执行无关。
promise 常用的api

resolved

rejected

all

race 方法接收一个promise数组作为参数并返回一个新的promise,数组中的promise会同时开始执行,race返回的promise的状态有数组中率先执行完毕的promise的状态决定

catch 执行出错可以使用throw关键字抛出错误,并使用catch方法进行捕获

 // 如果有多个promise需要执行,可以使用promise.all()
// 方法统一声明,改方法可以将多个promise对象包装成一个promise
// 该方法接收一个数组作为参数,数据的元素如果不是promise对象,则回先调用resolve方法转换。
//  如果中间有一个promise状态是reject,那么转换后的promise也会变成reject,并且将错误信息传给catch方法
var promises=["foo.txt","bar.txt","baz.txt"]
promises.map(function(path){
  // console.log(path)
  return readFile_promise(path)
})

Promise.all(promises).then(function(results){
  console.log(results) // [ "foo.txt", "bar.txt", "baz.txt" ] 顺序排列的
}).catch(function(err){
  // 
})
使用promise组织异步代码
// 例子; 有三个文本文件需要顺序读取
var lists=["foo.txt","bar.txt","baz.txt"]
var count=0;
readFile_promise("foo.txt").then(readCB).then(readCB).then(readCB);

function readCB(data){
  console.log(data) // foo bar baz
  if(++count>2){
    return
  }
  return readFile_promise(lists[count])
}
async/await

await关键字后面往往是一个promise,如果不是就隐式调用promise.resolve来转换成一个promise。
await 等待后面的promise执行完成再进行下一步操作。

var asyncReadFile=async function(){
  var result1=await readFile_promise("./foo.txt")
  console.log(result1.toString()) // foo
}
asyncReadFile()
async返回值

async函数总是会返回一个promise对象,如果return关键字后面不是一个promise,那么默认
调用promise。resolve方法进行转换。

async function asyncFunc(){
  return "hello Node"
}
asyncFunc().then(function(data){
  console.log(data) // hello Node
})
async函数的执行过程

在async函数开始执行的时候回自动生成一个promise对象。

当方法体开始执行后,如果遇到return关键字或者throw关键字,执行会立刻退出,

如果遇到await关键字则回暂停执行 await后面的异步操作结束后会恢复执行

执行完毕,返回一个promise

async function asyncFunc(){
  console.log("begin")
  return "hello Node"
}
asyncFunc().then(function(data){
  console.log(data) // hello Node
  console.log("end")
})
// begin 
// hello 
// end
await

await 操作符的结果是由其后面promise对象的操作结果来决定的,如果后面promise对象变为resolved,
await操作符发返回的值就是resolve的值;如果promise对象的状态变成rejected,那么await也会抛出reject的值。

async function readFile(){
  var result=await readFile_promise("./foo.txt")
  console.log(result) // foo
}
readFile()

// 等价于
readFile_promise("foo.txt").then(function(data){
  console.log(data) // foo
})
await于并行

await会等待后面的promise完成后再采取下一步动作,这意味着当多个await操作时,程序会便成完全的
串行操作。

当异步操作之间不存在依赖关系时,可以使用promise.all来实现并行。

async function readFile(){
  const [result1, result2]=await Promise.all([
    readFile_promise("./foo.txt"),
    readFile_promise("./bar.txt")
  ])
  console.log(result1, result2) // foo bar
}
readFile()

// 等价于
function readFile(){
  return Promise.all([
    readFile_promise("./foo.txt"),
    readFile_promise("./baz.txt")
  ]).then((result)=>{
    console.log(result) // [ "foo", "baz" ]
  })
}
readFile()
await 总结
await关键字使用的一些关键点

await关键字必须位于async函数内部

await关键字后面需要是一个promise对象(不是的话就调用了resolve转换的)

await关键字的返回结果就是在其后面promise执行的结果,可能是resolved或者rejected的值

不能在普通箭头函数中使用await关键字,需要在箭头函数前面加上async关键字。

await用来串行地执行异步操作,想实现并行使用promise.all

async函数 的缺点

假设我们有很多层的方法调用,最底层的异步操作被封装成了async方法,那么该函数的所有上层方法可能都要变成async方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102879.html

相关文章

  • 深入理解 Promise 实现细节

    摘要:显然,了解的实现细节,可以帮助我们更好地应用它。本文将主要根据的这篇文章,探讨的实现细节。核心说明尽管已经有自己的规范,但目前的各类库,在的实现细节上是有差异的,部分甚至在意义上完全不同。到前面到为止,所实现的都是不能级联的。 在之前的异步JavaScript与Promise一文中,我介绍了Promise以及它在异步JavaScript中的使用意义。一般来说,我们是通过各种JavaSc...

    junbaor 评论0 收藏0
  • 对于`Promise`部分属性的理解

    摘要:对于和的理解今天碰到问题是这样子的调试的时候发现走了也走了有在我印象里是走了就不该走后来发现是我理解错了代码是这样的这个的是里的异常,里如果有任何异常都会被捕获仔细看了是这样解释的简单来讲调用等于调用由于返回的是一个对象,返回值解释如下如果 对于Promise.then()和Promise.catch()的理解 今天碰到问题是这样子的:调试bug的时候发现axios走了then也走了有...

    琛h。 评论0 收藏0
  • 【译】理解回调和Promise

    摘要:理解回调和原文自工程师博客,传送门这两个概念是编程语言的基本内容。回调地狱就是滥用回调。通常,在回调中,错误作为第一个参数传递。这个具有这两个函数作为参数的回调称为执行程序。到目前为止,我希望我已经让自己了解了回调和。 理解回调和Promise 原文自工程师Fernando Hernandez博客,传送门 这两个概念是Javascript编程语言的基本内容。因为这种语言是在异步编程的...

    liuyix 评论0 收藏0
  • JavaScript 异步

    摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。写一个符合规范并可配合使用的写一个符合规范并可配合使用的理解的工作原理采用回调函数来处理异步编程。 JavaScript怎么使用循环代替(异步)递归 问题描述 在开发过程中,遇到一个需求:在系统初始化时通过http获取一个第三方服务器端的列表,第三方服务器提供了一个接口,可通过...

    tuniutech 评论0 收藏0
  • [译] 深入理解 Promise 五部曲:5. LEGO

    摘要:一个就像一个乐高玩具。问题是不是你小时候玩儿的那个有趣,它们不是充满想象力的打气筒,也不是一种乐高玩具。这是对的并不是给开发者使用的,它们是给库作者使用的。不会超过这两种情况。第二个是根据第一个处理函数如何运行来自动变成状态成功或者失败。 原文地址:http://blog.getify.com/promis... 在 Part4:扩展问题 中,我讨论了如何扩展和抽象Promise是多么...

    LiveVideoStack 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<