1.下載axios

yarn add axios

或者 npm install axios --save

2.在src檔案下新建utils資料夾，建立config.js,https.js,api.js檔案

在config.js裡面封裝axios請求基本資訊

export default {
    // 基礎url字首
    // baseURL:'/url',
    baseURL:"http://8.129.173.112:8080",
    // 配置請求頭資訊
    headers: {
      'Content-Type':'application/json;charset=UTF-8',
    },
    
 
// 設定超時時間
    timeout: 5000,
}

在https.js裡面分裝請求方法

// 引入axios
import axios from 'axios'
import configjs from './config.js';

// 建立axios例項
const httpService = axios.create({
    baseURL: configjs.baseURL,
    timeout: configjs.timeout // 請求超時時間
});

// request攔截器
httpService.interceptors.request.use(
    config => {
        
 
// 根據條件加入token-安全攜帶
        if (true) { // 需自定義
            // 頭部
            config.headers = configjs.headers;
        }
        return config;
    },
    error => {
        // 請求錯誤處理
        Promise.reject(error);
    }
)

// respone攔截器
httpService.interceptors.response.use(
    response => {
        
 
// 統一處理狀態
        const res = response.data;
        if (res.code != 1) { // 需自定義
            // 返回異常
            return Promise.reject({
                status: res.statuscode,
                message: res.message
            });
        } else {
            return response.data;
        }
    },
    // 處理處理
    error => {
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '錯誤請求';
                    break;
                case 401:
                    error.message = '未授權，請重新登入';
                    break;
                case 403:
                    error.message = '拒絕訪問';
                    break;
                case 404:
                    error.message = '請求錯誤,未找到該資源';
                    break;
                case 405:
                    error.message = '請求方法未允許';
                    break;
                case 408:
                    error.message = '請求超時';
                    break;
                case 500:
                    error.message = '伺服器端出錯';
                    break;
                case 501:
                    error.message = '網路未實現';
                    break;
                case 502:
                    error.message = '網路錯誤';
                    break;
                case 503:
                    error.message = '服務不可用';
                    break;
                case 504:
                    error.message = '網路超時';
                    break;
                case 505:
                    error.message = 'http版本不支援該請求';
                    break;
                default:
                    error.message = `未知錯誤${error.response.status}`;
            }
        } else {
            error.message = "連線到伺服器失敗";
        }
        return Promise.reject(error);
    }
)

/*網路請求部分*/

/*
 *  get請求
 *  url:請求地址
 *  params:引數
 * */
export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'get',
            params: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  post請求
 *  url:請求地址
 *  params:引數
 * */
export function post(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}

/*
 *  檔案上傳
 *  url:請求地址
 *  params:引數
 * */
export function fileUpload(url, params = {}) {
    return new Promise((resolve, reject) => {
        httpService({
            url: url,
            method: 'post',
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(response => {
            resolve(response);
        }).catch(error => {
            reject(error);
        });
    });
}


//可按情況新增
export default {
    get,
    post,
    fileUpload
}

在api.js裡面分裝請求介面

import http from './https' // 倒入 api


/**
 * 獲取企業詳情
 * 
 */
const getCompany = params =>{
    return http.get('/api/shenguiyuan/company/get', params)
}


// 預設全部倒出
// 根據需要進行  
export default {
   
    getCompany
   
}

然後，在main.js裡面定義全域性api

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import apis from './utils/api'

Vue.config.productionTip = false
Vue.prototype.$api=apis;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

最後，在元件裡面引用$api獲取資料

let fromData = {

   queryId:1
}

this.$api.getOrganization(fromData).then(res => {
     if(res.code==200){
           let componyDetail=res.data.data
     }
}