Encapsulate Axios in Vue

In the previous project, the request API and the request method are encapsulated. This encapsulation is for simplicity, better management of the interface given by the backend, reusability of the request code, and simplification of the code.

Install axios

 $ npm install axios

Create directory File

Create http directory in src

Create http.js user in http directory so request method

Create in http directory api.js is used to store the backend interface

create axios.js user in the http directory as an axios interceptor

create vue.config.js user request proxy under the root directory Configuration

Next is the code

The code in the project/scr/http/http.js

import  axios from & # 39; axios & # 39;;
 export default {
     /**
      * get request
      * @param url interface route
      * @param auth Whether to bring login information
      * @returns {AxiosPromise}
      */
     get(url, auth = false) {
         if (auth) {
             return axios.get(url, {headers: {Authorization: 'Your back-end user authenticates information'}});
         } else {
             return axios. get(url);
         }
     },
     /**
      * post request
      *
      * @param url interface route
      * @param data interface parameters
      * @param auth Whether to bring login information
      * @returns {AxiosPromise}
      */
     post(url, data, auth = false) {
         if (auth) {
             return axios.post(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});
         } else {
             return axios. post(url, data);
         }
     },
     /**
      * put request
      * @param url interface route
      * @param data interface parameters
      * @param auth Whether to bring login information
      * @returns {AxiosPromise}
      */
     put(url, data, auth = false) {
         if (auth) {
             return axios.put(url, data, {headers: {Authorization: 'Your back-end user authenticates information'}});
         } else {
             return axios. put(url, data);
         }
     },
     /**
      * delete
      * @param url interface route
      * @param auth Whether to bring login information
      * @returns {AxiosPromise}
      */
     del(url, auth = false) {
         if (auth) {
             return axios.delete(url, {headers: {Authorization: 'Your back-end user authenticates information'}});
         } else {
             return axios.delete(url);
         }
     },
     /**
      * upload files
      * @param url interface routing
      * @param file interface file
      * @param auth Whether to bring login information
      */
     uploader(url, file, auth = false) {
         let param = new FormData();
         param.append('file', file)
         if (auth) {
             return axios.post(url, param, {headers: {Authorization: 'Your back-end user authenticates information'}})
         } else {
             return axios. post(url, param)
         }
     },
 }

You can create a file api under the project /scr/http/ and then create an interface file according to the project module to facilitate management

Project /scr/http/api.js code

import Goods from './api/goods.js';
 export default {
     // front page
     Index: {
         index: '/index/index'
     },
     // personal center
     Home: {
         UserInfo: '/user/info'
     },
     // Of course, it can also be managed by file
     Goods: Goods
 }

Code in project /scr/http/api/goods.js

export default {
     GoodsShow: '/goods/default'
 }

Code in project /scr/http/axios.js

import axios from 'axios';
 // request interception
 axios.interceptors.request.use(cOnfig=>{
     // 1. This location is the last configuration before the request
   // 2. Of course, you can also add the user authorization information required by your backend in this position
   return config
 }, error => {
     return Promise. reject(error)
 })
 // response interception
 axios.interceptors.response.use(respOnse=>{
   // request succeeded
   // 1. Customize your own interception according to your own project needs
   // 2. Then return the data
   return response;
 }, error => {
     // Request failed
       if (error && error. response) {
             switch (error. response. status) {
                 case 400:
                     // Your handling of 400 errors\
                 break
                 case 401:
                     // Handle 401 errors
                 break
                 default:
                 // If none of the above are processed
                 return Promise. reject(error);
           }
     }
 })

The above is ready. Then the next step is to add the code in the project/scr/min.js

The code in the project/scr/min.js

import Vue  from & # 39; vue & # 39;;
 import App from & # 39;./App.vue & # 39;;
 import api from & # 39;./http/api & # 39;;
 import http from & # 39;./http/http & # 39;;
 // axios interceptor
 import './http/axios'
 // Globally register the backend interface
 Vue.prototype.$api = api;
 // Globally register the request method
 Vue.prototype.$http = http;
 Then the next step is to use
 We use it in the project /src/views/index/index.vue
 
     
     
  

 

Next is proxy configuration

Project/vue.config.js code

// Backend request  Address attention [he will get different env files according to your environment]
 const target = process.env.APP_API_URL;
 module.exports = {
   devServer: {
     // All interface request proxy
   proxy: {
       '/api': {
         target: target,
         changeOrigin: true,
         ws: true,
         pathRewrite: {
               & # 39; ^api & # 39;: & # 39; & # 39;
         }
       }
     }
   }
 }

Recommended tutorials: “PHP Tutorial” “JS Tutorial”

The above is the detailed content of encapsulating Axios in Vue. For more, please pay attention to other related articles on 1024programmer.com!