Vue Axios encapsulation

define

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

features

  • Supporting Promise API
  • Intercept requests and responses
  • Transform request data and response data
  • Automatically convert JSON data
  • The client supports XRSF

Return to the chase

In Vue project development, we worked with interfaces a lot, and how to use Axios elegantly became very important.

Usually we receive the interface data by sending a request from the client to the back end, and then render the interface data perfectly on the web page.

At the same time, when dealing with interfaces, network requests are used. What are the network request libraries that are integrated with Vue?

  • vue-resource
  • axiosThe official recommendation
  • fetch

This chapter uses AXIos to complete requests for interfaces and encapsulate AXIos requests for business development purposes.

Once written, lifelong benefit 😁

start

Install axios

yarn add axios

Encapsulation HTTP. Js

Create a separate file to encapsulate AXIos. While doing so, you need to negotiate some conventions with the back end: request headers, status codes, request timeout…….

Introduce the necessary UI prompt box, different status code, prompt different response,

Request header: to implement some specific business, must carry some parameters to request (for example: membership business)

Status code: Performs different services according to the status returned by the interface, which needs to be agreed with the backend.

Request interceptor: Determines which requests are accessible based on the request header.

Response interceptor: This is the execution of different services based on the status code returned from the back end

The complete code

Configure multiple domain names to request different urls

When writing your own projects, an interface URL is usually enough. However, in the actual project development, a project may request the URL of different servers. At this time, we simply configure the access to the interface domain name, and then directly call the interface of different domain names by changing objects. In this way, no matter how many different interfaces there are, we can manage and use them well.

The complete code

Axios is now basically wrapped and ready to meet your basic business needs

Now that AXIos is wrapped, it’s time to wrap individual business module requests. How to split this up depends on your personal style

Business requirements Note:

  • Http.js must be introduced axios
  • Base.js must be importedInterface url
  • You must import the business requirements api.js under the Vue entry file and mount the API to the Vue prototype
  • All that's left is to write your business requirements
Style 1

All requests are written to an api.js file

The complete code

How do you use it?
Global mountapi.js

Business component invocation

Styles 2,

You can create the corresponding module files to manage the corresponding business requests, so that the interface problems, locate errors quickly, and finally introduce different files into an API, JS, so that management is very convenient.


How do you use it?

Encapsulating versus not encapsulating

No wrapping, streaking Axios

The last

At this point, Axios has basically wrapped up and wrapped the business module’s request, basically meeting the basic business requirements. If the project needs additional requirements, it can be repackaged on top of the original.

After encapsulation, if the item is changed by the interface domain name, execute to call the domain name object under base.js.