1. 服務端地址：http://xxx.xxx.xxx.xxx:8088

2. 本地專案地址：http://192.168.229.44:1234/demo/#/

1.當我們本機可以ping通xxx.xxx.xxx.xxx時，在位址列輸入http://xxx.xxx.xxx.xxx:8088/rcce/occu/list?pageNo=0&pageSize=5我們可以獲得介面對應的資料，那麼我們怎麼樣操作可以使得在位址列中輸入本機ip加上介面地址也能獲得資料呢？答案是代理

配置好上面的程式碼後，我們可以實現在位址列輸入http://192.168.229.44:1234/rcce/occu/list?pageNo=0&pageSize=5

下面我們在專案中去使用axios調介面獲得資料

上面的操作我們可以看出，每個介面如果我們都單獨用axios去配置然後請求，這太麻煩了，url那麼長，還帶著ip，而且返回的資料還被data包裹了一層，以後如果所有請求要在請求頭加個引數，還得全域性搜尋去修改，這太不便利了，所以我們選擇封裝一下。

httpInterceptors.js檔案內容就是一個攔截器，對介面進行統一處理。axios返回的資料，我們所需要的資訊放在data.data裡面，每次去拿都要點一下，不方便，有時候請求我們可能需要統一處理加個引數之類的。

 1 // request interceptor
 2
 
 import { Message } from 'element-ui';
 3 
 4 export default service => {
　　　　// 請求
 5   service.interceptors.request.use(
 6     config => {
 7       // Do something before request is sent
 8       if (!config.params) {
 9         config.params = {};
10       }
11       if (config.method === 'get') {
 
12         config.params.t = Date.now();
13       }
14       return config;
15     },
16     error => {
17       // Do something with request error
18       Promise.reject(error);
19     }
20   );
21   // respone interceptor
22   service.interceptors.response.use(
23     response => {
24       const res = response.data;
25       if (res.code) {
26         Message({
27           message: res,
28           type: 'error',
29           duration: 3 * 1000
30         });
31       } else {
32         return response.data.data;
33       }
34     },
35     error => {
36       Message({
37         message: error,
38         type: 'error',
39         duration: 5 * 1000
40       });
41       return Promise.reject(error);
42     }
43   );
44 };

services.js檔案建立了一個公共的axios,後續的請求都通過這個。

import axios from '../../common/utils/http';
import httpInterceptors from './httpInterceptors';
import _ from 'lodash';
window.publishApiBath = location.origin + '/demo/rcce';// 公共路徑
export const baseService = axios.create({
    baseURL: window.publishApiBath,
    paramsSerializer: (params) => {
        var parts = [];
        _.each(params, (val, key) => {
            if (val === null || typeof val === 'undefined') {
                return;
            }

            if (Array.isArray(val)) {

            } else {
                val = [val];
            }

            val.forEach((v) => {
                if (v instanceof Date) {
                    v = v.toISOString();
                } else if (typeof v === 'object') {
                    v = JSON.stringify(v);
                }
                parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(v));
            });
        });
        return parts.join('&');
    },
    timeout: 60000
});
httpInterceptors(baseService);

index.js建立了一個請求例子。

import { baseService } from './services';
export const getQualList = (pageNo, pageSize, qualName) => {
    return baseService({
        url: "/qual/list",
        method: 'get',
        params: {
            pageNo: pageNo - 1 || 0,
            pageSize,
            qualName
        },
    });
};