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

Most people do not understand the knowledge points of this article "how to achieve asynchronous API for Promise to simplify asynchronous programming for WeChat Mini Programs", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how WeChat Mini Programs realizes asynchronous API for Promise to simplify asynchronous programming" article.

You can use it like this:

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 () = > {/ / failed 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 directly into the project directory such as: / module introduce import toPromise from'/ module/to-promise/src/index' to bind Wechat global object (wx) to the function where you need it, so that you can get Wechat APIconst toPromiseWx = toPromise (wx) and start converting the asynchronous API//apiName you need to Wechat asynchronous method name For example, convert wx.request () to const request = toPromiseWx ('request') / / directly use the request method

For example:

Import toPromise from'/ module/to-promise/src/index'// conversion 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) / / Control The platform 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 weather acquisition is successful, (err) = > {/ / execute here after weather acquisition fails 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 complicated, it may be crazy that the above article is about "how WeChat Mini Programs realizes asynchronous API to simplify asynchronous programming for Promise". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to 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.