The latest implementation steps for encapsulating axios requests in vue3

In Vue3, you can use the axios library to make network requests and encapsulate them into a custom function for global use. The specific implementation steps are as follows:

1. Install Axios: The axios library can be installed through npm or yarn.

npm install axios
# oryarn add axios

2. Create an axios instance and set the default configuration items and interceptors. The file is named

import axios from 'axios'
const service = ({
  baseURL: .VUE_APP_BASE_API,
  timeout: 5000
})

// request interceptor(
  config => {
    // Here you can set request headers, request parameters, etc. return config  },
  error => {
    (error)
    return (error)
  }
)

// response interceptor(
  response => {
    // Process the return data here const { data } = response    if ( !== 200) {
      ('Error:', )
      return (newError( || 'Error'))
    } else {
      return data
    }
  },
  error => {
    (error)
    return (error)
  }
)

// Encapsulate specific request methods: The four request types are not placed together with the following titles 3 and 4export const get = (url, params) => {
  return service .get(url, { params });
};

export const post = (url, data) => {
  return service .post(url, data);
};

export const put = (url, data) => {
  return service .put(url, data);
};

export const delete= (url, data) => {
  return service .delete(url, data);
};

export default service

In the above code, we create an instance of axios called service and set some default configuration items and interceptors. Among them, the request interceptor is used to process the request before sending the request, such as setting the request header, request parameters, etc.; the response interceptor is used to process the return data, such as determining whether the request is successful based on the status code returned by the interface.

3. Encapsulate axios into a function.

import service from '@/utils/request'
export function request(config) {
  return service(config)
}

In the above code, we encapsulate axios into a function called request and export the function so that it can be called directly elsewhere.

4. Use encapsulated axios request in the code

import { request } from '@/api'
request({
  url: '/user',
  method: 'get'
}).then(response => {
  (response)
})

5. Combined with the four requests in place of titles 3 and 4 above

import { get, post,put, delete } from '@/utils/request';

// Example of sending a GET requestget('/users', { id: 1 })
  .then((response) => {
    // Process response data    (response);
  })
  .catch((error) => {
    // Processing request error    (error);
  });

// Example of sending a POST requestpost('/users', { name: 'John', age: 25 })
  .then((response) => {
    // Process response data    (response);
  })
  .catch((error) => {
    // Processing request error    (error);
  });

In the above code, we introduce the encapsulated request function and initiate a network request by passing a configuration object containing the request parameters.

Summarize

It should be noted that in actual applications, we may also need to further encapsulate different types of requests according to business needs, such as GET request, POST request, PUT request, DELETE, etc., as well as handling request errors.

This is the end of this article about encapsulating axios requests in vue3. For more related contents of encapsulating axios requests for vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!