Detailed explanation of the secondary encapsulation of vue new environment variables and network request tool axios

1. 【Environment Variables】Background:

In our actual project development, several environments are generally distinguished, namelyDevelopment Environment、Test environmentandProduction environmentOf course, it is not ruled out that there are more detailed ones.Pre-release environmentGenerally speaking, these four environments are enough for us to use.

2. Steps to create a new environment:

2.1 Create 4 new environment variable files in the root directory:

.【Development Environment】
.【Test Environment】
.【Pre-release environment】
.【Production Environment】
The file contents in the four environments are as follows:

//.documentNODE_ENV = dev
# base url
VUE_APP_BASE_URL = "https://dev."
--------------------------------------------------------------
//.documentNODE_ENV = test
# base url
VUE_APP_BASE_URL = "https://test."
--------------------------------------------------------------
//.documentNODE_ENV = uat
# base url
VUE_APP_BASE_URL = "https://uat."
--------------------------------------------------------------
//.documentNODE_ENV = prod
# base url
VUE_APP_BASE_URL = "https://prod."
--------------------------------------------------------------

2.2 Modify the startup command under [scripts]:

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build:test": "vue-cli-service build --mode test",
    "build:uat": "vue-cli-service build --mode uat",
    "build:prod": "vue-cli-service build --mode prod"
  },

After modifying this way, the local startup project command is still:npm run serve
The command to package the test environment is:npm run build:test
The command to package the pre-release environment is:npm run build:uat
The command to package the production environment is:npm run build:prod

3. [Secondary Packaging Based on Axios] Background:

In actual development projects, network requests basically use the axios network request tool, but simply use them like('')Come to request the interface. As the project becomes larger and larger, the pages are more and more, and the functions are becoming more and more perfect, we will inevitably write a large number of axios requests. It is time-consuming and labor-intensive and inconvenient to manage it in a unified manner. Therefore, axios needs to be encapsulated twice to achieve time, effort and worry-free development when we develop projects.

3.1 Create new utils/file

The first step issrcIn the directory, create newutils/The file content is as follows:

//Introduce axios firstimport axios from 'axios'
//Then create a request service through the create method//Then there are some configuration items in the create method, such as the interface domain name `baseURL` and the interface request timeout` timeout`//Interface url`url`//Interface request method `method`, etc., we need to pass it in as needed// create an axios instance
const service = ({
  baseURL: .VUE_APP_BASE_URL, // Complete API address = interface domain name + interface path  timeout: 5000 // Request timeout 5s})
//The following will define two interceptors, namely `Request Interceptor` and `Response Interceptor`// `Request Interceptor` is some logic before the front-end requests the back-end interface, such as turning on loading, configuring the header request header, etc.// `Response Interceptor` is the backend responding to our frontend and returning the data. For example, we can get the status Code in this response interceptor//Get the code returned by the backend interface, close loading, process some detailed logic according to the code code, and other operations, etc.//request interceptor request interceptor(
  config =&gt; {
    // do something before request is sent.  Do something before sending a request    ['token'] = "xxxxxx"
    return config
  },
  error =&gt; {
    // do something with request error
    (error) // for debug
    return (error)
  }
)
// response interceptor response interceptor(
  response =&gt; {
    const res = 
    // if the custom code is not 20000, it is judged as an error.
    if ( !== 200) {
      alert( || 'Error')
      return (new Error( || 'Error'))
    } else {
      return res
    }
  },
  error =&gt; {
    ('err' + error) // for debug
    alert( || 'Error')
    return (error)
  }
)
// Finally, we expose the service we declaredexport default service

4. Encapsulation and use of API

The API request method also needs to be encapsulated, and the encapsulation process is as follows

4.1 Create a new API/file in the src directory

The file contents are as follows:

import request from '../utils/request';
//Login the interface, use data to pass parameters through post methodexport function login(data) {
  return request({
    url: '/api/login',
    method: 'post',
    data
  })
}
//Get the xx list interface, use params to transfer parameters to getexport function getList(params) {
  return request({
    url: '/api/getList',
    method: 'get',
    params
  })
}

4.2 Using encapsulated api

On the required page, for example, our login page needs to call the login interface, we must use this

//The first step is to import our login interface using importimport { login } from '../api/index'
// Then call the login method directlylogin({username:'admin',password:"123456"}).then(res=&gt;{
      (res);
})

The above is the detailed explanation of the new environment variables of vue and the secondary encapsulation of the network request tool axios. For more information about vue axios encapsulation, please pay attention to my other related articles!