First, you need to install the axios service

NPM I d4axios-s // or yarn add d4axios-sCopy the code

The version used for the current article is 0.1.7

createService

When creating a service, you need to initialize it just like other services, such as vuex and vuE-Router. In this case, the initialization is createService.

import { createService } from 'd4axios'
Copy the code

CreateSerivce is also another name for serviceConfig. ServiceConfig returns the value of axios proxy object, createService returns the value of vue3 {install}, and D4AXIos itself does not depend on any version of Vue, Therefore, vue2, React, and NG can use createService to initialize services

1.1 createSerivce ServiceConfigurationOptions optional configuration items

1. axios ? : AxiosInstance | AxiosRequestConfig

Passing axiOS instance AxiosInstance or AxiosRequestConfig, the configuration attribute of AXIOS, is supported, although it is generally not recommended to create an instance yourself, using configuration attributes instead. The code will use

if (isAxiosInstance(configs.axios)) {
    globalAxios = configs.axios;
} else {
    globalAxios = axios.create(configs.axios)
}
Copy the code

All objects will depend on this AXIos instance, so you can create instance objects for D4AXIos.

2. interceptors? : { request,response }

If necessary, you can use the interceptors configuration axios. Interceptors. Request and axios. Interceptors. Response, current configuration only supports a, configure multiple is not recommended. For the average developer, this configuration is not recommended and can be overridden using the following configuration.

3. beforeRequest? , beforeResponse?

The interceptor, detached from axios itself, is called for the first time before axios.request and axios.response. Applies to secondary processing of pre-request values and post-response but not yet used data

The input parameter of beforeRequest is the parameter to be sent in this request. The return value of this function is the value required in the final request, so it is not recommended to return undefined. If the input object is formData, it will be converted to Object and the modified value will be converted to FormData. So you don’t need to worry about converting FormData.

The input parameter of beforeResponse is beforeResponse(Response.data,response), and the final return value of the function is the response result value. It is suitable for rearranging background data structures.

4. routes ? : { route,onBefore? ,onAfter? } []

The business processing unit based on API Routes is ideal for controlling business processes. You can throw the required exception information by placing repeated business exception handling in this unit.

Parameters as follows:

  • Route: request URL to intercept, using re matching

  • OnBefore: Interception before the request. The first parameter is the same as beforeRequest, and the second and third parameters are resolve and Reject of the promise. Determines whether the request continues. The result value of the request parameter needs to be returned via resolve. If resolve is undefined, the original value is used

  • OnAfter: Intercepts the response. The first and second parameters are the same as beforeResponse. The third and fourth parameters are resolve and reject. Custom business process exceptions can be thrown.

After the above content is created, service initialization is complete.

If you want to use D4AXIos, can you organize your Axios code in a different way? The content of the sample in.