background:
- Hybridapp, the front end uses Js-bridge method to call native interface, such as acquiring device information, taking pictures, face recognition and so on.
- The front end encapsulates the call library, and each time the native interface is called, two steps are required (1, mount the native callback function under window, 2, call the Invokenative function, send the request data)
before transformation:
With callbacks, you must define a callback function to mount on Window[funcname] before calling the method in Ygritte. Then call.
Questions:
1, may lead to callback hell: for example, in a scenario, you need to judge the app version, and then call the different native interface, then you need to define callbacks in the callback, resulting in nesting;
2, can not be changed to sync: for example, in the scene, in the home page, in [created] need to determine the app version, if the version is too low, in [mounted] need to prompt. Using callbacks, the callback in [created] has not been executed in theory when mounted is executed.
Retrofit:
- Using promise to transform calls and callbacks
- To ensure that the old code is compatible, do not modify the original form of adding an interface in the Ygritte using the prototype
- The definition of the callback function is encapsulated and executed in the callback resolve
/** *function(linewidth, LineColor, Callbackname ) {var args = [' knownothing ', ' gethandwritingsignature ', Callbackname | | ", { linewidth:linewidth, Linecolor:linecolor }]; Snow.invokenative (args);};
Do not modify the original function above, add the lower function encapsulation
/** * Check the app return value, avoid multiple callbacks, only perform a resolve problem * promise in the definition of resolve or reject, will not perform the following resolve and Reject * Getphoto: When the image data is successfully obtained, Will callback two times, one parameter is the picture value, one parameter is undefined * * @param {string} method * @param {Object} res * @returns*/functionChecknativereturn (method, res) {if(method = = = ' Getphoto ' && (!res | | ' {} ' = = = Json.stringify (res)))return false; return true;}/** * Promise Method call * Ghost is the white ice Wolf of Jon Snow and looks like a fox. Its hair color is pure white, eye pupil red as blood. * * @param {Object} {method, Key = method, data} * @returns*/functionGhost ({method, key =method, data}) { return NewPromise (Resolve, reject) = { if(Ygritte[method] &&typeof(Ygritte[method]) = = = ' function ') { //Global Mount app callback functionWindow[key] = (res) = = { if(Checknativereturn (method, res)) {Resolve (res)); Window[key]= () + = {}; } Else{reject (res); } }; varargs = [' knownothing ', method, key | | ‘‘, data]; Snow.invokenative (args); } Else{Reject (NewError (' native method not present, please check methods ')); } });}
after transformation:
1. Use the promise package to avoid the behavior of the global Mount function in the business code
2, can use the async syntax, the Code table meaning clearer
Legacy:
1, the partial native interface calls, will execute two callbacks, originally is in the business code to judge. Promise needs to be flattened with code, because the resolve function in promise only executes once, and there is no guarantee that the first execution is a business-required parameter.
"Notes" in Hybridapp using Promise Js-bridge