把微信小程序異步API轉(zhuǎn)化為Promise。用Promise處理異步操作有多方便，誰用誰知道。
微信官方?jīng)]有給出Promise API來處理異步操作，而官方API異步的又非常多，這使得多異步編程會層層回調(diào)，代碼一復雜，回調(diào)起來就想砸電腦。
于是寫了一個通用工具，把微信官方的異步API轉(zhuǎn)化為Promise，方便處理（多）異步操作。
你可以這樣用：
準備轉(zhuǎn)化后的方法并暴露出
// /utils/wx-promise.jsimport toPromise from '/module/to-promise/src/index'const toPromiseWx = toPromsie(wx)export const request = toPromiseWx('requset')export const getLocation = toPromiseWx('getLocation')export const setStorage = toPromiseWx('setStorage')//export 其他你項目中可能用到的異步API在其他文件中使用
在App.js中使用：
//App.jsimport { request } from './utils/wx-promise.js'App({ onLanuch: () => { request({ url: 'http://api.yourapi.com' }) .then(() => { //成功后處理 }) .then(() => { //失敗后處理 }) }})在其他page中使用：
// /page/index.jsimport { request, setStorage } from '../utils/wx-promise.js'page({ onLoad: () => { request({ url: 'http://api.yourapi.com' }) .then(() => { //成功后處理 }) .then(() => { //失敗后處理 }) }, onHide: () => { setStorage({ key: 'yourkey', data: 'yourvalue' }) .then(() => { //保存成功 }) .then(() => { //保存失敗 }) }})項目地址：to-promise
其他更多更具體用法，直接粘貼README了，如下。
to-promise是一個轉(zhuǎn)換微信小程序異步API為Promise的一個工具庫
優(yōu)點：
避免小程序異步編程多次回調(diào)帶來的過多回調(diào)導致邏輯不清晰，篇幅過長等問題。
借助于Promise異步編程特點，支持鏈式操作，像同步一樣寫異步。
轉(zhuǎn)化后得API幾乎和微信官方API一樣。
使用方法：
安裝
使用git安裝到項目根目錄/module,
git clone https://github.com/tornoda/to-promise或直接下載放入項目目錄下如：/module在需要用到的地方引入import toPromise from '/module/to-promise/src/index'綁定微信全局對象(wx)到函數(shù)，以便可以取到微信得APIconst toPromiseWx = toPromise(wx)開始轉(zhuǎn)化你需要得異步API//apiName為微信異步方法名，如對wx.request()進行轉(zhuǎn)化const request = toPromiseWx('request')//直接使用request方法舉例：
import toPromise from '/module/to-promise/src/index'//轉(zhuǎn)換wx.getStorage()const getStorage = toPromsie(wx)('getStorage') //使用getStorage({ key: 'test' }) .then( (res) => { //res的值與wx.getStorage({ success: (res) => {} })中的res值一樣 //res = {data: 'keyValue'} console.log(res.data)//控制臺打印storage中key對于的value return res.data//如果需要繼續(xù)鏈式調(diào)用轉(zhuǎn)化后的api，需要把值顯示返回 }, (err) => { //err的值與wx.getStorage({ success: (err) => {} })中的err值一樣 throw err } )關(guān)于Promise對象的使用，請參見Promise
API
toPromise(global)
參數(shù)
(wx): wx全局對象。即toPromise(wx)這樣調(diào)用
返回
(function): 參數(shù)(string)為小程序異步方法名。返回一個函數(shù)，該函數(shù)的參數(shù)與返回值如下。
參數(shù)：(object) 對應wx小程序異步方法中的參數(shù)(OBJECT)除去success與fail后的對象。例如：
官方APIwx.getLocation(OBJECT)的OBJECT接受如下屬性： type altitude success fail complete，那么去除（success fail）后為：type altitude complete。
返回: (pending Promsise) 返回一個未知狀態(tài)的Promise對象，在該對象上調(diào)用.then(onFulfilled, onRejected)方法來處理對用成功或失敗的情況。onFulfilled為請求成功后調(diào)用的回調(diào)函數(shù)，參數(shù)為返回值，onRejected為請求失敗后的回調(diào)函數(shù)，參數(shù)為返回的錯誤信息。
簡單點來說，
const getLocation = toPromiseWx('getLocation')getLocation({ type: 'wgs84', altitude: true, complete: () => { console.log('to-promsise is awesome') }}).then( (res) => {//dosomething if succeed}, (err) => {//dosomething if failed})與下面官方調(diào)用等價
wx.getLocation({ type: 'wgs84', altitude: true, complete: () => { console.log('to-promsise is awesome') }, success: (res) => {//dosomething if succeed}, fail: (err) => {//dosomething if failed}})應用場景舉例
如：獲得GPS信息后，根據(jù)GPS信息獲取天氣信息，取得天氣信息后立馬存入localStorage。
import toPromise from '/module/to-promise/src/index'const toPromiseWx = toPrmise(wx)//方法轉(zhuǎn)換const getLocation = toPromiseWx('getLocation')const request = toPromiseWx('request')const setStorage = toPromiseWx('setStorage')//鏈式寫邏輯getLocation() //獲取位置信息 .then( (res) => { //位置獲取成功后的處理，res為返回信息 //處理res后返回有用的信息，這里直接返回res，用于演示 return Promise.resolve(res) //必須 }, (err) => { //位置獲取失敗后的錯誤處理，err為錯誤信息 //錯誤處理 return Promise.resolve(err) //必須 } ) .then( (res) => { //根據(jù)位置獲取成功后的信息，請求天氣信息 return request({ url: 'http://api.weather.com'}) //返回一個pending 狀態(tài)下的Promise } ) .then( (res) => { //天氣獲取成功后存入storage的回調(diào) setStorage({ key: 'test', data: 'res' }) }, (err) => { //天氣獲取失敗后執(zhí)行這里，err為獲取天氣失敗的錯誤信息 } )如果使用官方的API寫上述邏輯，代碼是這樣的：
wx.getLocation({ success: (res) => { //some transformation with res wx.request({ url: 'http://api.weather.com', success: (res) => { wx.setStorage({ success: () => { //do something }, fail: (err) => { //do something if err happend } }) }, fail: (err) => { //do something if err happend } }) }, fail: (err) => { //do something if err happend})//層層回調(diào)，如果邏輯再復雜點，可能就瘋了總結(jié)
以上所述是小編給大家介紹的微信小程序異步API為Promise簡化異步編程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
