封裝Axios外掛
阿新 • • 發佈:2022-04-01
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 };