This is the 9th day of my participation in Gwen Challenge

Axios is a Promise-based HTTP library that can be used in browsers and Node.js.

As one of the most popular HTTP libraries on the front end, AXIos was the best choice for HTTP libraries on the Vue project, beating out Vue’s official Vue -Resource, which was recommended by The author. While AXIos is an excellent HTTP library, it’s not that convenient to use directly in a project, so we need to encapsulate it to a certain extent to reduce code duplication and make it easier to call and maintain the code later. Let’s talk about the encapsulation of AXIos in Vue

Axios encapsulation

import axios from './axios';

export function request(cionfig) {
    // Create an axios instance
    const instance = axios.create({
        baseURL: ' ' ,// Set the default address,
        timeout: 5000
    })

    // A network request occurred
   return instance(cionfig) // Since we return a promise, we can just use return

}

Copy the code

First let’s do a simple request wrapper to Axios

Axios interceptor

For each time we get a response to the request, the corresponding processing. Intercrprors.request.use () : Request interception, a function returned on success of the request, and a function returned on failure. Note that the original data must be returned after intercepting the request, otherwise the data cannot be requested later. Usage Scenarios:

  • 1 Add request information
  • 2 Make loding ICONS
  • 3 Some network requests must carry parameters (login)

Intercrprors. Response. Use () : response to intercept, he returned and even have a function that res and err respectively represent the request is successful after failed to get results and request the results returned. Usage Scenarios:

  • Get the data of the background request and save it in data

Keep – the use of the alive

Keep-alive saves the state of a page or component, and avoids repeated creation and rendering. It also improves browser performance. Like Transition, keep-alive is an abstract component, wrapped in a dynamic component, and does not render as a DOM element or appear in the parent component chain of a component.

Keep alive – properties

  • Include: can be a string or regular expression, indicating that only components with matching names are cached.
  • Exclude: Exclude can also be a regular or string, indicating that any component that matches the name will not be rendered.
  • Max: number (not commonly used), maximum number of component instances that can be cached.

Include and exclude support comma-separated strings as well as regular and array representations in version 2.1.0

<keep-alive include="a,b">
  <component>Component A</component>
</keep-alive>
<! -- Comma separated -->
<keep-alive :include="/a|b/">
  <component>Component A</component>
</keep-alive>

<keep-alive :include="['a','b]">
  <component>Component A</component>
</keep-alive>
<! -- Note that you need to bind v-bing when using the latter two methods.Copy the code