Shulou(Shulou.com)06/01 Report--

Editor to share with you a sample analysis of axios encapsulation requests in the vue project. I hope you will get something after reading this article. Let's discuss it together.

I. brief introduction

Axios is a lightweight HTTP client that executes HTTP requests based on XMLHttpRequest services, supports rich configurations, supports Promise, and supports both the browser side and the Node.js side. Since Vue2.0, you has greatly announced the cancellation of the official recommendation of vue-resource and the recommendation of axios instead. Now axios has become the first choice for most Vue developers. (if you are not already familiar with axios, you can check its API here. )

Before encapsulation, let's take a look at what an axios request looks like in an actual project without encapsulation.

It probably looks like this:

Axios ('http://localhost:3000/data', {method:' GET', timeout: 1000, withCredentials: true, headers: {'Content-Type':' application/json', Authorization: 'xxx',}, transformRequest: [function (data, headers) {return data) }], / / other request configuration.}) .then ((data) = > {/ / todo: real business logic code console.log (data);}, (err) = > {if (err.response.status = 401) {/ / handle authorization error} if (err.response.status = 403) {/ / handle server forbidden error} / / other error handling. Console.log (err);})

You can see that in this code, the page code logic is only at line 15, with a large chunk of request configuration code at the top and a large chunk of response error handling code below, which has almost nothing to do with the function of the page, and these contents in each request are almost the same. even some parts are exactly the same.

Second, after packaging 1. Encapsulation step

The essence of encapsulation is to add all kinds of things to the content to be encapsulated, and then present them to the user as a new whole, in order to achieve the purpose of expansion and easy to use.

What the encapsulation axios needs to do is to configure the configuration shared by all HTTP requests on the axios in advance, reserve the necessary parameters and interfaces, and return it as a new axios.

The directory structure is as follows (generated by Vue-cli 3.0):

|-- public/

|-- mock/

| |-- db.json # simulated data for my newly-built API |

|-- src/

| |-- assets/ |

| |-- components/ |

| |-- router/ |

| |-- store/ |

| |-- views/ |

| |-- Home.Vue |

| |-- App.vue |

| |-- main.js |

| |-- theme.styl |

|-- package.json

|.

two。 Encapsulation target

On the Home page, making an axios request is as simple as calling a method with a small number of parameters, so I can focus on the business code.

1. Encapsulate axios into a separate file

Create a utils/http.js file under src

Cd src mkdir utils touch http.js

Introduction of axios

/ / src/utils/http.js import axios from 'axios'

Create a class

/ / src/utils/http.js / /... Class NewAxios {}

Configure different request addresses for different environments

Configure different baseURL according to process.env.NODE_ENV, so that the project can automatically switch the requested host address in different environments by executing the corresponding packaging command.

/ / src/utils/http.js//...const getBaseUrl = (env) = > {let base = {production:'/', development: 'http://localhost:3000', test:' http://localhost:3001',} [env]; if (! base) {base ='/';} return base;}; class NewAxios {constructor () {this.baseURL = getBaseUrl (process.env.NODE_ENV);}}

Configure timeout

The timeout property, which I usually set for 10 seconds.

/ / src/utils/http.js//...class NewAxios {constructor () {/ /... This.timeout = 10000;}}

Configure to allow carrying vouchers

The widthCredentials property is set to true

/ / src/utils/http.js//...class NewAxios {constructor () {/ /... This.withCredentials = true;}}

Create an instance of the method request for this class

In the request method, create a new axios instance, receive the request configuration parameters, process the parameters, add the configuration, and return the request result of the axios instance (a promise object).

You can also use the default exported axios instance instead of creating it, and put all the configurations on it, but then the whole project will share an axios instance. Although this is fine in most projects, the request and response structures of different service addresses in some projects may be completely different, and it is impossible to share an instance. So in order to make the encapsulation more generic and flexible, I will use axios's create method to make each request a new axios instance.

/ / src/utils/http.js//...class NewAxios {/ /... Request (options) {/ / A new axios instance is created with each request. Const instance = axios.create (); const config = {/ / merge the parameters passed by the user with the public configuration. .. options, baseURL: this.baseURL, timeout: this.timeout, withCredentials: this.withCredentials,}; / / configure interceptors to support the configuration of different interceptors according to different url. This.setInterceptors (instance, options.url); return instance (config); / / return the execution result of the axios instance}}

Because the interceptor is configured with a lot of content, it is encapsulated into an internal function.

Configure request interceptor

All changes made to the request parameters before sending the request are configured here. For example, uniformly add token credentials, uniformly set the language, uniformly set the content type, specify data format, and so on. Remember to return to this configuration when you are done, otherwise the whole request will not proceed.

I will configure a token here.

/ / src/utils/http.js//...class NewAxios {/ /... / / the url here allows you to set different interceptors for interface paths that require special handling. SetInterceptors = (instance, url) = > {instance.interceptors.request.use ((config) = > {/ / request interceptor / / configure token config.headers.AuthorizationToken = localStorage.getItem ('AuthorizationToken') | |'; return config;}, err = > Promise.reject (err));} / /.}

Configure response interceptor

Perform a round of pre-processing of the response data before the requested then or catch processing. For example, filtering response data, what is more, here is the unified error handling of all kinds of response error codes, as well as network disconnection processing and so on.

I will judge 403 and disconnection here.

/ / src/utils/http.js//...class NewAxios {/ /... SetInterceptors = (instance, url) = > {/ /. Instance.interceptors.response.use ((response) = > {/ / response interceptor / / todo: if you want to pre-process the response results according to business needs, put console.log (); return response here. }, (err) = > {if (err.response) {/ / response error code handling switch (err.response.status) {case '403: / / todo: handler server forbidden error break; / / todo: handler other status code default: break;} return Promise.reject (err.response) } if (! window.navigator.online) {/ / network disconnection / / todo: jump to offline page return-1;} return Promise.reject (err);});} / /.}

In addition, in the interceptor, it is also suitable to place buffering effects such as loading: display loading in the request interceptor and remove loading in the response interceptor. This gives all requests a uniform loading effect.

Export a new instance by default

/ / src/utils/http.js / /... Export default new NewAxios ()

The final complete code is as follows:

/ / src/utils/http.jsimport axios from 'axios';const getBaseUrl = (env) = > {let base = {production:' /', development: 'http://localhost:3000', test:' http://localhost:3001',} [env]; if (! base) {base ='/';} return base;}; class NewAxios {constructor () {this.baseURL = getBaseUrl (process.env.NODE_ENV); this.timeout = 10000 This.withCredentials = true;} / / the url here allows you to set different interceptors for interface paths that require special handling. SetInterceptors = (instance, url) = > {instance.interceptors.request.use ((config) = > {/ / add loading / / configuration token config.headers.AuthorizationToken = localStorage.getItem ('AuthorizationToken') | |'; return config;}, err = > Promise.reject (err) Instance.interceptors.response.use ((response) = > {/ / remove loading / / todo here: if you want to pre-process the response results according to business needs, put the return response here. }, (err) = > {if (err.response) {/ / response error code handling switch (err.response.status) {case '403: / / todo: handler server forbidden error break; / / todo: handler other status code default: break;} return Promise.reject (err.response) } if (! window.navigator.online) {/ / network disconnection / / todo: jump to offline page return-1;} return Promise.reject (err);});} request (options) {/ / create a new axios instance for each request. Const instance = axios.create (); const config = {/ / merge the parameters passed by the user with the public configuration. .. options, baseURL: this.baseURL, timeout: this.timeout, withCredentials: this.withCredentials,}; / / configure interceptors to support the configuration of different interceptors according to different url. This.setInterceptors (instance, options.url); return instance (config); / / return the execution result of the axios instance}} export default new NewAxios ()

Now the axios package is 80% complete. We need to further combine the axios and the interface with another layer of encapsulation in order to achieve the encapsulation goal I set at the beginning.

3. Encapsulate API with the new axios

Create a new api folder under the src directory. Centralize all interfaces involving HTTP requests into this directory for management.

Create a new home.js. We need to classify the interfaces according to certain rules, and one type of interface corresponds to a js file. This classification can be divided by page, by module, and so on. In order to make the demonstration more intuitive, I will divide it by page here. Actually decide according to your own needs.

Use the new axios to encapsulate the API (fix the value of the url and merge the parameters passed by the user), and then name and export these functions.

/ / src/api/home.js import axios from'@ / utils/http';export const fetchData = options = > axios.request ({... options, url:'/ data',}); export default {}

Create a new index.js in the api directory and export all the interfaces of other files in this file.

/ / src/api/index.js export * from'. / home'

This layer encapsulates our new axios into a more concise and semantic interface method.

Now our directory structure looks like this:

|-- public/

|-- mock/

| |-- db.json # API simulation data |

|-- src/

| |-- api/ # all APIs are concentrated in this directory |

| |-- the APIs involved in the home.js # Home page are encapsulated here |

| |-- entry of all API calls in index.js # project |

| |-- assets/ |

| |-- components/ |

| |-- router/ |

| |-- store/ |

| |-- utils/ |

| |-- http.js # axios is encapsulated here |

| |-- views/ |

| |-- Home.Vue |

| |-- App.vue |

| |-- main.js |

| |-- theme.styl |

|-- package.json

|.

4. Use encapsulated axios

Now when we want to send a HTTP request, we can call any interface simply by importing the index.js file under api, and the encapsulated axios is used.

/ / src/views/Home.vue This is home page / / @ is an alias to / srcimport {fetchData} from'@ / api/index';export default {name: 'home', mounted () {fetchData () / / axios request is here. Then ((data) = > {console.log (data);}) .catch ((err) = > {console.log (err);});},}

The axios request is encapsulated in the fetchData function, and the page request does not need any axios API at all. Initiating the request to get the response quietly is as easy as calling a simple Promise function. And in the page only need to focus on dealing with business functions, do not be disturbed by other things.

After reading this article, I believe you have a certain understanding of "sample analysis of axios encapsulation requests in vue projects". If you want to know more about it, please follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.