Sample code of how applets can independently implement interceptors

In some frameworks, it is found that it provides a very practical function: an interceptor. For example, to achieve this requirement: every time the applet gets the location, it is stored in globalData:

({
 // ..
 success(res) {
  getApp(). = res
  // ...
 }
})

If you write this way in every place you use, it will be no big problem, but it always seems not "smart". On the one hand, there are more duplicate codes, and on the other hand, if the demand changes and you save it to another place after obtaining the positioning, it will have to be modified many times.

Elegant interceptor

With an interceptor, you can implement it more elegantly:

intercept('getLocation', {
 success(res) {
  getApp(). = res
 }
})

Just define the interceptor as above in one place and use it directly in other places. So, how to implement the above method?

Implement intercept method

// utils/
// Storage interceptor definitionvar interceptors = {}
function intercept(key, config) {
 intercept[key] = config
}
export {
 intercept,
 interceptors
}

It's very simple, expose the intercept method and define a memory and expose it together.

Agent wx

To implement the use of automatic application of interceptors, it must be redefined based on the original method.

import { interceptors } from './intercept'

// Backup the original WeChat methodvar wxBackup = {}
[
 'getLocation'
 // There are many other ways to do it...].forEach((key) => {
 wxBackup[key] = wx[key]
 wx[key] = (config) => {
  if (interceptors[key]) {
   // Callback method passed in backup business code   var backup = {}
   var interceptor = interceptors[key]
   [
    'success',
    'fail',
    'complete'
   ].forEach((k) => {
    backup[k] = config[k]
    config[k] = (res) => {
     interceptor[k](res)
     backup[k](res)
    }
   })
  }
  wxBackup[key](config)
 }
})

Of course, the above code uses an array to list all WeChat functions that may be defined by an interceptor, and can also be processed using (wx) general purpose.

More usage scenarios

The above scenario is relatively simple, and there are more scenarios for the application of interceptors. For example, every time a parameter is sent to the latitude and longitude of the public parameter, the data returned by the interface will be agreed to be wrapped in an object, and the request needs to be retrieved once. When data exceptions are not available, specific processing is required for error codes, so it can be easily handled with an interceptor:

intercept('request', {
 data(data) {
  var location = getApp().
   =  + ',' + 
  return data
 },
 success(res) {
  if ( == 200) {
   return 
  } else {
   if ( == 'xxx') {
    // Login expires, log in again    // ....
   }
  }
 }
})

Note that if there are more return values ​​in the interceptor function, you won’t write more specific implementation methods. Just improve the code based on the above implementation.

Summarize

Careful readers may find that we have proxyed or modified many methods provided by WeChat. Some developers may not like this and hope to maintain the purity of the original code. It depends on the team's preferences. Based on this consideration, it is mainly because you don't want to define too many new methods or APIs, and try to write code in the way you are most familiar with.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.