The purpose of interceptors

Interceptors are generally used for unified processing of HTTP requests, such as token authentication (each request carries a token), unified processing of 404 responses, and so on.

Previous implementation

Different from AXIos, FETCH does not find API related to request return interceptor. Then, how to realize unified interception before? Referring to ANTD-Pro, write a unified request method, and all requests call this method, so as to realize interception of request and return. So we have to introduce this method every time, so is there a better implementation?

A common interview question

Vue bidirectional binding principle

  • Based on defineProperty vue2
  • Based on the Proxy vue3

Minimal bidirectional binding

   const obj = {};
Object.defineProperty(obj, 'text', {
  get: function() {
    console.log('get val');   },set: function(newVal) {
    console.log('set val:' + newVal);
    document.getElementById('input').value = newVal;
    document.getElementById('span').innerHTML = newVal; }});const input = document.getElementById('input');
input.addEventListener('keyup'.function(e){
  obj.text = e.target.value;
})

Copy the code

Which we can see used to look at data hijacking.

defineProperty

Looking at MDN we can see how defineProperty is used

Object.defineProperty(obj, prop, descriptor);
Copy the code

Descriptor property and method contain

  • Value The value of the property (needless to say)
  • Once the switch is false, no additional (value, writable, 64x) can be set up and works without any additional control system.
  • Enumerable: True Enumerable: True Iterate through in loop or list in object. keys.
  • Writable: true, if false, the value of the property cannot be overridden, only read-only
  • Set () is called when setting a property
  • Called when get() accesses the property

Recall that when we use fetch, we always use it directly, so fetch is an attribute of the window or global object. Every time we use fetch, we access the attribute of window or global, namely the get method above

Implementation of interceptors

const originFetch = fetch;
Object.defineProperty(window."fetch", {
  configurable: true.enumerable: true.// writable: true,
  get() {
    return (url,options) = > {
      returnoriginFetch(url,{... options,... {headers: {
          'Content-Type': 'application/json; charset=UTF-8'.Accept: 'application/json'.token:localStorage.getItem('token') 
          // Add token to request interception},... options.headers }}).then(checkStatus)// checkStatus
    .then(response= >response.json())
  }
});
Copy the code

Just paste the above code into the program entry file

extension

This article is based on defineProperty, Proxy can also be implemented. In addition, the request method in the small program is hung under wx, also can be implemented, the specific implementation of Wx.request

  • Address fetch

  • In addition, I often share the recent learning content, problems encountered in the project and solutions on my blog