Vue：簡單封裝axios，適用於大多數比較基礎的請求

簡單的封裝一下axios請求，包含了請求前的處理，返回結果和請求異常處理

import axios from "axios";
import store from "../store.js";

//封裝axios
axios.defaults.headers["Content-Type"] = "application/json";

//創建axios實例
const service = axios.create({
  baseURL:
    process.env.NODE_ENV == "dev" ? "/api" : process.env.VUE_APP_BASE_API, //本地測試跨域配置
  timeout: 130000, //請求超時
  withCredentials: true //跨域請求時發送Cookie
});

請求前的處理 request攔截器

const TIME_ZONE = "timeZone";

//http request 攔截器
service.interceptors.request.use(
  config => {
    // showProgress 是否顯示Loading框
    if (!(config.data && config.data.showProgress)) {
      /* 請求顯示Loading框
      Toast.loading({
        duration: 0,
        message: "Loading...",
        forbidClick: true
      });
      */
    }
    //獲取token
    const token = window.localStorage.getItem("omni-token");
    config.headers["xxx"] = token; // xxx伺服器對應token名

    //如果我們的應用是針對世界各地的，當要把後臺(伺服器)存的時間展示給不同地區的用戶時
    //這個時間應該經過時差轉換、 轉成用戶客戶端本地的時間，然後呈現給用戶
    //獲得本地與格林威治時間的時差：new Date().getTimezoneOffset()，單位為分鐘。

    let timezone = new Date().getTimezoneOffset() / -60;
    if (timezone > 0) {
      timezone = `+${timezone}:00`;
    } else {
      timezone = `${timezone}:00`;
    }
    config.headers[TIME_ZONE] = timezone;

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

返回結果和請求異常處理 response攔截器

//http response 攔截器
service.interceptors.response.use(
  response => {
    if (response.config.data) {
      let json = JSON.parse(response.config.data);
      if (!json.showProgress) {
        //Toast.clear();
      }
    } else {
      //Toast.clear();
    }
    const code = response.data.code;
    if (code === 401) {
      //token令牌過期失效 清空緩存
      store.dispatch("tokenExpired");
    } else if (code === 500) {
      //500錯誤
      return null;
    } else {
      //介面請求正常 直接返回結果
      return response;
    }

    return Promise.reject(response.data.message);
  },
  error => {
    //介面請求異常，拋出異常信息
    // Toast.fail({
    // 	duration: 2000,
    // 	message: error.data.message,
    // 	closeOnClick: false,
    // 	closeOnClickOverlay: false,
    // })

    //  1.判斷請求超時
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      console.log('根據你設置的timeout/真的請求超時 判斷請求現在超時了，你可以在這裡加入超時的處理方案')
      // return service.request(originalRequest);//例如再重覆請求一次
    }

    // 2.需要重定向到錯誤頁面
    const errorInfo = error.response
    if (errorInfo) {
      // error = errorInfo.data
      if (errorInfo.status === 403) {
        router.push({
          path: '/error/403'
        })
      }
    }

    return Promise.reject(error);
  }
);

Get請求(Json)

export function requestGet(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "get",
      params: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Get請求(form表單提交)

export function requestGetForm(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "get",
      data: null,
      params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post請求(Json)

export function requestPost(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: params
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post請求(form表單提交)

export function requestPostForm(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: null,
      params,
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

Post請求(文件上傳)

export function requestFileUpload(url, params = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: "post",
      data: params,
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
}