1. Install AxiOS

npm install axios -S
Copy the code

2, main.js reference, global mount

Import {getRequest, postRequest} from 'common/axios' // mount the global method vue.prototype. GetRequest = getRequest; Vue.prototype.postRequest = postRequest;Copy the code

3. Create the common folder under the SRC folder and create axios.js for unified encapsulation of interface requests

// Note: process.env.api_rootd configuration can be referenced in my other article on production test environment configuration: import axios from 'axios'; Import {Toast} from 'vant' // unified request path prefix let base = '/ API '; API_ROOT = process.env.API_ROOT // Set axios.defaults.timeout = 15000; / / cross-domain access carry cookies axios. Defaults. WithCredentials = true axios. Interceptors. Request. Use (config = > {return config. }, err => {Toast(' request timed out '); return Promise.resolve(err); }); / / HTTP response interceptor axios. Interceptors. Response. Use (response = > {const data = response. The data; Switch (data.code) {case 210: Toast(data.message); case 210: Toast(data.message); break; // error case 500: Toast(" Contact the administrator "); break; default: return data; } return data; }, (err) => {// return status code not 200 Toast(' connection error, please try again '); return Promise.resolve(err); }); // get request export const getRequest = (url, params) => {let accessToken = getStore('accessToken'); return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); }; // export const postRequest = (url, params) => {let accessToken = getStore("accessToken"); return axios({ method: 'post', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); }; export const putRequest = (url, params) => { // let accessToken = getStore("accessToken"); return axios({ method: 'put', url: `${API_ROOT}${base}${url}`, data: params, transformRequest: [function (data) { let ret = ''; for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'; } ret = ret.substring(0, ret.length - 1); return ret; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'accessToken': accessToken } }); }; export const deleteRequest = (url, params) => { let accessToken = getStore('accessToken'); return axios({ method: 'delete', url: `${API_ROOT}${base}${url}`, params: params, headers: { 'accessToken': accessToken } }); }; * @param {*} url * @param {*} params */ export const getRequestWithNoToken = (url, params) => { return axios({ method: 'get', url: `${API_ROOT}${base}${url}`, params: params }); };Copy the code

4. Unified management interface in API folder

Import {getRequest, postRequest} from 'common/axios'; import {getRequest, postRequest} from 'axios'; Export const _getClolum = (params) => {return getRequest('/get/colum', Export const _getSave = (params) => {return postRequest('/vo/save', params)}Copy the code

5. Call within specific components

import { _getSave } from "@/api/public.js";

const data={
    pageNumber:this.pageNumber,
    pageSize:this.pageSize
}
_getSave(data).then(res => {
   if(res.code==200){
     console.log(res)
   } 
});
Copy the code