vue項目封裝api接口

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里面，每次去拿都要點一下，不方便，有時候請求我們可能需要統一處理加個參數之類的。

// request interceptor
import { Message } from 'element-ui';

export default service => {
　　　　// 請求
  service.interceptors.request.use(
    config => {
      // Do something before request is sent
      if (!config.params) {
        config.params = {};
      }
      if (config.method === 'get') {
        config.params.t = Date.now();
      }
      return config;
    },
    error => {
      // Do something with request error
      Promise.reject(error);
    }
  );
  // respone interceptor
  service.interceptors.response.use(
    response => {
      const res = response.data;
      if (res.code) {
        Message({
          message: res,
          type: 'error',
          duration: 3 * 1000
        });
      } else {
        return response.data.data;
      }
    },
    error => {
      Message({
        message: error,
        type: 'error',
        duration: 5 * 1000
      });
      return Promise.reject(error);
    }
  );
};

 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
        },
    });
};