Interviewer: Has axios been packaged in the Vue project? What is the main package?

1. What is axios

  axios is a lightweight  HTTPclient

XMLHttpRequest Execute  requests based  on services HTTP , support rich configuration, support  Promise, support browser end and  Node.js end. Since Vue2.0, Youda has announced that it will cancel  vue-resource the official recommendation of the pair and recommend it instead  axios. Now  axios it has become the first choice of most  Vue  developers

#Characteristics _

• Created from the browser XMLHttpRequests
• node.js create  httprequest from 
• support  Promise API
• Intercept requests and responses
• Transform request data and response data
• cancel request
• Automatically convert JSON data
• Client Support DefenseXSRF

#Basic use

 Install

 import

 send request

concurrent requestsaxios.all([]) 

2. Why package

axios The API is very friendly, you can easily use it directly in your project.

       However, as the scale of the project increases, every time HTTPa request is initiated, operations such as setting the timeout period, setting the request header, judging which request address to use according to the project environment, error handling, etc., need to be written again

       This kind of duplication of work not only wastes time, but also makes the code redundant and difficult to maintain. In order to improve our code quality, we should re-encapsulate it in the project  axios before using it

for example:

       If each page sends a similar request, it will be too cumbersome to write a bunch of configuration and error handling

At this time, we need to axioscarry out secondary packaging to make it more convenient to use

3. How to package

        While encapsulating, you need to negotiate some agreements with the backend, request header, status code, request timeout time...

Set the interface request prefix: according to different development, test, and production environments, the prefix needs to be distinguished

Request header: To implement some specific services, some parameters must be carried before the request can be made (for example: membership business)

Status code: According to the difference returned by the interface status , different services are executed, which needs to be agreed with the backend

Request method: re-encapsulate according to methods such as get, etc., which is more convenient to usepost

Request Interceptor: Determine which requests can be accessed according to the request header settings of the request

Response interceptor: This block is to judge and execute different businesses according to the status code returned by the backend`

#Set interface request prefix

Use nodeenvironment variables to make judgments to distinguish development, testing, and production environments

When debugging locally, you also need to vue.config.jsconfigure proxy forwarding in the file devServerto achieve cross-domain 

Set request headers and timeouts

       In most cases, the request headers are fixed, and only in a few cases, some special request headers are required. Here, the universal request headers are used as the basic configuration. When a special request header is required, the special request header is passed in as a parameter to override the basic configuration

Package request method

First introduce the encapsulated method, and re-encapsulate it into a method in the interface to be called to expose it

Put the encapsulated method in a api.jsfile 

 can be called directly from the page

In this way, unified management can apibe achieved, and future maintenance and modification only need to api.jsbe performed on the file.

# request interceptor

The request interceptor can add a token to each request, and it is easy to maintain after unified processing

 

#Response interceptor

The response interceptor can perform a layer of operations after receiving the response, such as judging the login status and authorization based on the status code

 

summary

• Encapsulation is a very meaningful method in programming. Simple axiosencapsulation allows us to appreciate its charm.
• There is no absolute standard for encapsulation  axios , as long as your encapsulation can meet your project requirements and is easy to use, it is a good encapsulation solution.