Following the last project, I started to assemble the axios bucket today. The following is my personal installation, configuration and packaging process. Install axios

npm install axios --save
Copy the code

After successful installation, it can be used in the project. You can check github for specific usage method. Next, I will paste my personal operation method. First create a utils directory under the SRC directory, create a HTTPS. Js file, the inside of the writing is as follows:

/ / introduce axios
import axios from "axios";
import { ElMessage } from 'element-plus';

const http = axios.create({
  baseURL: '/api'.timeout: 50000
})

// Data request interception
http.interceptors.request.use((config) = > {

  return config;
}, (error) = > {
  return Promise.reject(error);
});

// Returns response data interception
http.interceptors.response.use((res) = > {
  const data = res.data;
  // This function is called when the status code is in the 2xx range to process the response data
  if (res.status === 200) {
    const code = data.code;
    return Promise.resolve(data); }},(error) = > {
  if (error.response.status) {
    // This function is called whenever the status code exceeds the 2xx range to handle the error response
    switch (error.response.status) {
      case 404:
        ElMessage({
          type: 'error'.message: 'Request path not found! '.showClose: true
        });
        break;
      case 502:
        ElMessage({
          type: 'error'.message: 'Server internal error! '.showClose: true
        });
        break;
      default:
        break; }}return Promise.reject(error);
});
// This is a big boss's method, much simpler
export default http;
// This is my original way of writing.
// Post request method
// export const post = (url, params) => {
// return new Promise((resolve, reject) => {
// http.post(url, params).then(res => {
// resolve(res);
// }).catch(error => {
// reject(error);
/ /})
/ /});
/ /}
// get request method
//export const get = (url) => {
// return new Promise((resolve, reject) => {
// http.get(url).then(res => {
// resolve(res);
// }).catch(error => {
// reject(error);
/ /})
/ /});
/ /}
Copy the code

Once written, the AXIos has done its simple secondary wrapping. I put all the requests into a js file, create an API directory in the SRC directory, and create an index.js file.

// Bring in the wrapped AXIos
//import { post, get } from '.. /utils/https';
import http from '.. /utils/https';
Create a business interface object
const test = {
  query(params) {
    return http.post('/url', params);
  },
  test_get() {
    return http.get('/url')}}export default { test }
Copy the code

It can then be used in components that need to call interfaces. I’m used to global registration in main.js.

// Import the common API file
import api from './api/index'.// Here I use provide Inject
app.provide('$api', api);

/ / you can also use the app. Config. GlobalProperties. = $API API; (VUe3) -- Mount to prototype chain
// Vue.prototype.$api = api; (vue2.x)
Copy the code

use

<script setup>
import { getCurrentInstance, inject, ref, useAttrs, useSlots } from "vue";

// provide the corresponding usage method
const $api = inject('$api')

// app.config.globalProperties 
// const { proxy } = getCurrentInstance();
// const $api = proxy.$api;

function test() {
    $api.test.query(params).then(res= > {
        console.log(res);
    }).catch(error= > {
        console.log(error);
    })
}

</script>
Copy the code

The above is the whole process, the operation can be completed according to their own business interface added. If you like it, you can support it