1 install AXIos, why install QS dependency

npm i axios qs

Qs.parse () parses the URL into an object

const qs = require(‘qs’); Let url = ‘address ‘; qs.parse(url); console.log(qs.parse(url));

Qs.stringify () serializes the object into a URL, concatenated with &

const qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     token: "b-a6006ad3dba0",
     id: "12"
   };
qs.stringify(obj);
console.log(qs.stringify(obj));
Copy the code

2 Create an API folder under the SRC folder and create an http.js file.

// Re-wrap axios import axios from'axios'Import qs from'qs'// Configure different environments to distinguish different interface addresses // Production environmentif (process.env.NODE_ENV == 'production') {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break} // Test environmentelse if (process.env.NODE_ENV == 'test') {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break} // Development environmentelse {
    axios.defaults.baseUrl = 'http://192.168.1.90:8081'
    break} // Set timeout and whether to allow cross-domain credentials axios.defaults.timeout = 100000 // Set Cros to allow cross-domain cookies. Or in the case of cross-domain cannot carry cookies axios. Defaults. WithCredentials =true// Send a request: x-www-form-urlencode // When sending a post request, the background asks for data in this format, and the front end converts the object to axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencode'/ / qs is an object into axios. Defaults. TransformRequest = data = > qs. Stringify (data) / / set the interceptor / / add request interceptor / / set the token value axios.interceptors.request.use(function(config) {// What to do before sending the request // Carry the tokenlet token = window.localStorage.getItem('token')
    token && (config.headers.Authorization = token)
    return config;
}, function(error) {// What do I do about the request errorreturnPromise.reject(error); }); // Add a response interceptor, the server returns a message // set a custom status code. Many companies are not configured, because a lot of the background does not return 3 xx status code / / axios. Defaults. ValidateStatus = status = > {/ / / / custom response HTTP status code, more than 200 less than 300 status code / /return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(function(Response) {// Do something with the response data // This is the server only has the body part of the responsereturn response.data;
}, function(error) {// Do something about the response errorif(error.response){// The server at least returned the result, look at the status code}else{// The server is not responding. 1 The server crashes. The client is disconnected from the networkif(! Window.navigator. onLine){// The client is disconnected and can jump to a disconnected page}}return Promise.reject(error);
});

export default axios;

Copy the code

3. How do I set up various environments in package.json

"scripts": {
    "serve": "vue-cli-service serve"."serve:test":"set NODE_ENV=test&&vue-cli-service serve"."serve:production":"set NODE_ENV=production&&vue-cli-service serve"."build": "vue-cli-service build"."lint": "vue-cli-service lint"
  },

Copy the code