Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to make WeChat Mini Programs asynchronous API for Promise", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to put WeChat Mini Programs asynchronous API for Promise" article can help you solve your doubts.

Prepare the transformed method and expose

/ 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 other asynchronous API that may be used in your project

Use in other files use in App.js:

/ / App.jsimport {request} from'. / utils/wx-promise.js'App ({onLanuch: () = > {request ({url: 'http://api.yourapi.com'}). Then () = > {/ / successful post-processing}). Then () = > {/ / failed post-processing})})

Use in other page:

/ / page/index.jsimport {request, setStorage} from'.. / utils/wx-promise.js'page ({onLoad: () = > {request ({url: 'http://api.yourapi.com'}). Then () = > {/ / successful post-processing}). Then () = > {/ / failure post-processing})} OnHide: () = > {setStorage ({key: 'yourkey', data:' yourvalue'}) .then (() = > {/ / Save successfully}) .then (() = > {/ / Save failed})}))

Project address: to-promise

For more specific uses, paste README directly, as follows.

To-promise is a tool library that converts WeChat Mini Programs's asynchronous API to Promise.

Advantages:

Avoid too many callbacks caused by Mini Program asynchronous programming, such as unclear logic, too long space and so on.

With the help of the characteristics of Promise asynchronous programming, it supports chain operation and writes asynchronism like synchronization.

The converted API is almost the same as the official API of Wechat.

How to use it:

Installation

Install to the project root directory / module using git

Git clone https://github.com/tornoda/to-promise

Or download it directly and put it in the project directory, such as / module

Introduce where it is needed

Import toPromise from'/ module/to-promise/src/index'

Bind the Wechat global object (wx) to the function so that you can get the API from Wechat.

Const toPromiseWx = toPromise (wx)

Start converting the asynchronous API you need

/ / apiName is the Wechat asynchronous method name, such as converting wx.request () to const request = toPromiseWx ('request') / / using the request method directly

For example:

Import toPromise from'/ module/to-promise/src/index'// transform wx.getStorage () const getStorage = toPromsie (wx) ('getStorage') / use getStorage ({key:' test'}). Then (res) = > {/ / res is the same as the res value in wx.getStorage ({success: (res) = > {}}) / / res = {data: 'keyValue'} console.log (res. Data) / / the console prints the value return res.data// for key in storage if you need to continue to chain call the converted api The value needs to be displayed and returned}, (err) = > {/ / err is the same as the err in wx.getStorage ({success: (err) = > {}}) throw err})

For the use of Promise objects, see Promise

API

ToPromise (global)

Parameters.

(wx): wx global object. That is, toPromise (wx) calls

Return

(function): the parameter (string) is the Mini Program asynchronous method name. Returns a function whose arguments and return values are as follows.

Parameter: (object) corresponds to the parameter in the wx Mini Program asynchronous method (OBJECT) the object after removing success and fail. For example:

The OBJECT of the official APIwx.getLocation (OBJECT) accepts the following attribute: type altitude success fail complete, so after success fail it is: type altitude complete.

Return: (pending Promsise) returns a Promise object with an unknown state on which the .then (onFulfilled, onRejected) method is called to handle the success or failure of the counterpart. OnFulfilled is the callback function called after a successful request, and the parameter is the return value. OnRejected is the callback function after the request fails, and the parameter is the returned error message.

To put it simply,

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})

Is equivalent to the following official call

Wx.getLocation ({type: 'wgs84', altitude: true, complete: () = > {console.log (' to-promsise is awesome')}, success: (res) = > {/ / dosomething if succeed}, fail: (err) = > {/ / dosomething if failed}})

Examples of application scenarios

For a single asynchronous call, see API Last

Multiple asynchronous operation calls, and each call uses the result returned by the previous one. For example: after obtaining the GPS information, get the weather information according to the GPS information, and store it in localStorage immediately after obtaining the weather information.

Import toPromise from'/ module/to-promise/src/index'const toPromiseWx = toPrmise (wx) / / method conversion const getLocation = toPromiseWx ('getLocation') const request = toPromiseWx (' request') const setStorage = toPromiseWx ('setStorage') / / chained write logic getLocation () / / get location information. Then (res) = > {/ / the processing after position acquisition is successful. Res returns useful information after returning information / / processing res. Return res directly here. Used to demonstrate return Promise.resolve (res) / / must}, (err) = > {/ / error handling after failed position acquisition, err is error message / / error handling return Promise.resolve (err) / / must}) .then ((res) = > {/ / get the information after success based on location Request weather information return request ({url: 'http://api.weather.com'}) / / return a Promise} in pending status). Then ((res) = > {/ / callback setStorage ({key:' test', data: 'res'}) stored in storage after the weather is successfully obtained)} (err) = > {/ / execute here after the weather acquisition failed Err to get the error message of weather failure})

If you write the above logic using the official API, the code looks like this:

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}) / / callback layer by layer If the logic is more complex, it may be crazy to read here, this article "how to put WeChat Mini Programs asynchronous API into Promise" article has been introduced, want to master the knowledge of this article also need everyone to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.