1. 程式人生 > 其它 >封裝Axios外掛

封裝Axios外掛

import axios from 'axios';
import { Message } from 'element-ui';

/**
 * 開發環境-專用
 * 本地代理
 */
// const baseURL = process.env.BASE_API;

/**
 * 生產環境-專用
 * Nginx代理
 */
const baseURL = process.env.API_ROOT;

/**
 * 1.建立axios例項
 */
const httpService = axios.create({
  baseURL: baseURL,
  timeout: 5 * 1000
});

/**
 * 2.設定請求攔截器
 */
httpService.interceptors.request.use(
  config => {
    /**
     * 根據條件可以讓每個請求攜帶token
     * config.headers['User-Token'] = token;
     */
    // if (true) {
    //   config.headers['User-Token'] = '';
    // }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

/**
 * 3.設定響應攔截器
 */
httpService.interceptors.response.use(response => {
  const res = response.data;
  if (res.code !== 0 && res.code !== 1) {
    return new Error({
      status: res.code,
      message: res.msg
    });
  } else {
    return res;
  }
},
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 = '未知錯誤';
    }
  } else {
    error.message = '伺服器連線超時';
  }
  /**
   * 全域性提示請求異常
   * Message.error(error.message);
   */
  Message.error(error.message);
  return Promise.reject(error);
});

/**
 * GET
 * @param {} url
 * @param {*} params
 * @returns
 */
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
 * @param {*} url
 * @param {*} params
 * @returns
 */
export function post (url, params = {}) {
  return new Promise((resolve, reject) => {
    httpService({
      url: url,
      method: 'post',
      params: params
    }).then(response => {
      resolve(response);
    }).catch(error => {
      reject(error);
    });
  });
}

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

export default {
  get,
  post,
  fileUpload
};