小程序Promise詳解

一、Promise概述

Promise 是非同步編程的一種解決方案，解決了回調地獄，還提供了豐富的 API 用於鏈式調用非同步任務。在小程序中，Promise 可以用於非同步請求、文件讀寫、動畫效果等多個方面，更是開發中必不可少的一部分。

二、Promise狀態

Promise 只有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗），狀態的變更不可逆。

const promise = new Promise((resolve,reject) => {
  // ...
  resolve('success')
  // or
  // reject('error')
})

promise.then((res) => {
  console.log(res) // success
}).catch((err) => {
  console.log(err) // error
})

三、Promise使用場景

在小程序中，Promis可以應用於很多場景。例如非同步請求。

const request = (url) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 在使用時，可以直接鏈式調用
request('https://api.github.com/users')
  .then((res) => {
    console.log(res)
    return request('https://api.github.com/users/test')
  })
  .then((res) => {
    console.log(res)
  })
  .catch((err) => {
    console.log(err)
  })

還可以應用於文件讀寫、動畫效果等多個方面。下面以文件讀寫為例來介紹Promise的應用。

四、Promise應用：文件讀寫

1、讀取文件內容

const readFile = (filePath) => {
  return new Promise((resolve, reject) => {
    wx.readFile({
      filePath: filePath,
      encoding: 'utf8',
      success(res) {
        resolve(res.data)
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 調用
readFile('/xx/xx/file.txt').then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

2、寫入文件內容

const writeFile = (filePath, content) => {
  return new Promise((resolve, reject) => {
    wx.writeFile({
      filePath,
      data: content,
      success() {
        resolve()
      },
      fail(err) {
        reject(err)
      }
    })
  })
}

// 調用
writeFile('/xx/xx/file.txt', 'hello world').then(() => {
  console.log('寫入成功')
}).catch((err) => {
  console.log(err)
})

五、Promise擴展

Promise提供了多個API，值得掌握。下面簡單介紹幾個：

1、Promise.all(iterable)：接收一個 Promise 實例的 iterable 對象，當所有 Promise 實例都成功時，返回的Promise實例狀態才改變。

const p1 = Promise.resolve(1)
const p2 = Promise.resolve(2)
const p3 = Promise.resolve(3)

Promise.all([p1, p2, p3]).then((res) => {
  console.log(res) // [1, 2, 3]
}).catch((err) => {
  console.log(err)
})

2、Promise.race(iterable)：接收一個 Promise 實例的 iterable 對象，只要有一個 Promise 實例狀態改變，返回的 Promise 實例的狀態就改變。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1')
  }, 1000)
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p2')
  }, 500)
})

Promise.race([p1, p2]).then((res) => {
  console.log(res) // p2
}).catch((err) => {
  console.log(err)
})

六、總結

Promise是非同步編程中非常重要的一個概念，掌握Promise的使用對小程序開發非常有幫助。在使用過程中，我們應注意Promise的狀態變更不可逆以及錯誤處理方法的正確使用等細節問題。同時，多了解Promise的擴展方法，能夠讓我們在開發中更加得心應手。