Implementation code using Flyjs global interception in MPVUE

After we installed Flyio

NPM Install Flyio
  Find the main.js file under the SRC directory  
First introduced Flyjs and instantiate

VAR fly = request (“flyio / dist / npm / wx”) var fly = new fly

 For example, we need to bring AppID every time you ask our own server interface, you need to bring OpenID   
/ / Request to intercept fly.interceptors.Request.Use ((request) => {request.body.Appid = ‘xxx’ // User’s OpenID is added to the global variable if it exists after getting it, we will It adds to the request parameter Let OpenID = Vue.Prototype.globalData.OpenID; if (OpenID) {Request.Body.OpenID = OpenID}})


When the server occurs Error, or user network error causes a request to fail, we can add a response interception
   
// Response interception fly.interceptors.Response.Use ((response) => {}, (err) => {// will come to here // Return Promise.Resolve (“sss”) wx.hideloading (); wx.showTOAST ({Title: ‘The network is not smooth, please try again!’, Icon: ‘none’,};})

Finally mount Flyjs to Vue’s prototype
  // mount Fly on the prototype of Vue on Vue.Prototype. $ flyio = fly  

Different pages directly use this. $ Flyio request (very convenient)

 Example:   
The interception mechanism in Fly is still Very powerful, and doing optimization processing in the error return information, supporting an asynchronous task in the Fly interceptor, that is, if the request data is requested, if we intercept the token does not exist, you can re-get token in the interceptor, and then The previous request is executed.


Const fly = Require (“Flyio / Dist / NPM / WX”) const fly = new flyvue.prototype. $ Http = fly; fly.interceptors. Request.use ((request) => {// Add custom header if (API.GET (‘token’)) {request.timeout = 30000, request.headers = {“Content-Type”: “Content-Type”: “content-type”: / json “,” cld.stats.page_entry “: API.Get (‘Scene’),” Version “: Store.State.Version,” Token “: API.Get (‘token’)} wx.showloading ({Title: “Load”, MASK: true,}); Return Request;} else {fly.lock (); // Lock request Return public.load (). Then ( Res => {request.timeout = 30000, request.headers = {“content-type”: “Application / JSON”, “CLD.Stats.page_Entry”: API.Get (‘Scene’), “Version”: Store. State.Version, “token”: api.get (‘token’)} wx.showloading ({Title: “Load”, mask: true,}); // Wait for token to return after unlocking, fly.unlock () Return Request; // Continue before request,}}}) fly.interceptors.Response.use ((response) => {wx.hideloading (); returnate}, (err) => {wx.hideloading ); if (err.status == 0) {RETURN “Network connection exception”} else if (err.status == 1) {Return “network connection timeout”} else if (Err.Status == 401) {return User is not logged in “} else {if (eRr.Response.data.Message) {return err.response.data.Message} Else {return ‘request data failed, please try again later’}}; // do sometying with response error}


The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.


© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment