首頁 > web前端 > js教程 > promise是什麼?怎麼用?

promise是什麼?怎麼用?

不言
發布: 2019-03-23 16:02:51
轉載
3998 人瀏覽過

這篇文章帶給大家的內容是關於Laravel多型關聯的介紹(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

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函數的執行過程
  1. 在async函數開始執行的時候回自動產生一個promise物件。
  2. 當方法體開始執行後,如果遇到return關鍵字或throw關鍵字,執行會立刻退出,

如果遇到await關鍵字則回暫停執行await後面的非同步操作結束後會恢復執行

  1. 執行完畢,回傳一個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方法。

這篇文章到這裡就已經全部結束了,更多其他精彩內容可以關注PHP中文網的JavaScript影片教學欄位!

以上是promise是什麼?怎麼用?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板