Complete tutorial on using axios encapsulation in vue

Preface

Nowadays, in projects, the Axios library is generally used to request Http interface. It is a promise-based http library that can be run on the browser side and in the browser. In addition, there are excellent features such as intercepting requests and responses, converting JSON data, and client defense against XSRF.

Considering that the writing styles of each project are confusing and inconsistent when actually using it. Axios is packaged in a general way, with the purpose of helping simplify the code and facilitate later updates and maintenance, and be as general as possible.

The method is as follows

1. Vue install axios

	npm install axios -S
	or
	npm i axios -S

2. Global introduction

	import axios from 'axios'
	.$axios = axios //Bind axios to the prototype of vue

3. Configure cross-domain in the root directory

	 = {
	 publicPath: './',
	 //Configure cross-domain request	 devServer: {
	  open: true, // Whether to automatically open the browser	  https: false, //Whether to enable https	  hotOnly: false,
	  proxy: { // Configure cross-domain	   '/api': {
	    target: 'http://*********', //Request the interface domain name	    ws: true,
	    secure: false,
	    changOrigin: true, //Whether to crossing is allowed	    pathRewrite: {
	     '^/api': ''
	    }
	   }
	  },
	  before: app =&gt; { }
	 }
	}

4. Create a file in the API folder under the src subdirectory to simply encapsulate axios

import axios from 'axios'
//This references the full screen loading of elementimport { Loading } from "element-ui";

const service = ({
 baseURL: '/',
 timeout: 30000 // Set the request timeout time})
let loading = "";
// Request an interceptor(
 (config) =&gt; {
  // Do some processing before the request is sent  if (!(['Content-Type'])) {
   loading = ({
    lock: true,
    text: "loading...",
    spinner: "el-icon-loading",
    background: "rgba(255,255,255,0.7)",
    customClass: "request-loading",
   });
   if ( == 'post') {
    ['Content-Type'] =
     'application/json;charset=UTF-8'
    for (var key in ) {
     if ([key] === '') {
      delete [key]
     }
    }
     = ()
   } else {
    ['Content-Type'] =
     'application/x-www-form-urlencoded;charset=UTF-8'
     = ()
   }
  }
  const token = "token"
  // Let each request carry token-- ['X-Token'] as a custom key Please modify it yourself according to the actual situation  if (token) {
   ['Authorization'] = token
  }
  return config
 },
 (error) =&gt; {
  ();
  // Send failed  (error)
  return (error)
 }
)

// Response Interceptor(
 (response) =&gt; {

  ();
  // dataAxios is the data in the data that axios returns  // ();
  const dataAxios = 
  // This status code is agreed with the backend
  return dataAxios
 },
 (error) =&gt; {
  return (error)
 }
)

	export default service

5. Create http file under the api folder

 // Introduce encapsulated axios // ps: If there is no encapsulation, just introduce axios normally  import axios from "./api";
	// /api is to configure cross-domain path variable  let reportUpload= '/api/report/upload'
  export const Upload= () =&gt; {
   return ( reportUpload )
  }

6. Call the interface in the page

// Introduce encapsulated interface 	import { Upload} from "@/api/"; 

// Used when calling async Upload() {
  let { result } = await getlist ();
  	(result)
 },

Summarize

This is the end of this article about the use of axios encapsulation in vue. For more related content on vue axios encapsulation, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!