api接口處添加屬性 (標紅處)
// 校驗台賬 export const checkEquiment = (data) => { return axios({ url: '/job/equipmentInfo/checkEquipment', method: 'post', data, ContentType:'multipart/form-data' }) }
封裝axios中調用接口中配置的屬性
// 二次封裝axios模塊,包含攔截器等信息 import Axios from 'axios' import config from './config' import router from '@/router' import { MessageBox, Message, Loading } from 'element-ui' import qs from 'qs' export default function $axios(options) { return new Promise((resolve, reject) => { // 創建一個axios實例 // let responseType = 'json' if (options.responseType) { config.responseType = options.responseType }
//請求頭Axios.create創建之前做判斷,拿到接口中配置的屬性,設置請求頭為config.headers={'Content-Type': options.ContentType}
console.log(options.ContentType) if(options.ContentType){ config.headers = { 'Content-Type': options.ContentType } } const axios = Axios.create({ baseURL: config.baseUrl, headers: config.headers, timeout: config.timeout, withCredentials: config.withCredentials }) // 定義請求次數(用於判斷請求是否已經全部響應) let requestCount = 0 let loading // (客戶端請求前)顯示loading function showLoading() { if (requestCount === 0) { loading = Loading.service({ lock: true, text: '拼命加載中...' // spinner: 'el-icon-loading', // loading樣式類名 // background: 'rgba(0,0,0,0.5)', // customClass: 'create-isLoading' }) } requestCount++ } let timer // (服務器響應后)嘗試隱藏loading function tryHideLoading() { requestCount-- // 采用setTimeout是為了解決一個請求結束后緊接着有另一請求發起導致loading閃爍的問題 timer = setTimeout(() => { if (requestCount === 0) { loading.close() clearTimeout(timer) } }) } // 請求攔截器 axios.interceptors.request.use( config => { // 在請求頭里添加系統編碼 config.headers.systemCode = '01' // 解決get請求傳遞數組參數的問題 if (config.method === 'get') { config.paramsSerializer = function(params) { return qs.stringify(params, { arrayFormat: 'repeat' }) } } // console.log(options.loading) if (options.loading != false) { showLoading() } // return config }, error => { loading.close() // 請求發生錯誤時 console.log('request:', error) // 判斷請求超時 if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) { console.log('timeout請求超時') } // 需要重定向到錯誤頁面 const errorInfo = error.response if (errorInfo) { error = errorInfo.data // 頁面那邊catch的時候就能拿到詳細的錯誤信息,看最下邊的Promise.reject const errorStatus = errorInfo.status // 404 403 500 ... router.push({ path: `/error/${errorStatus}` }) } return reject(error) // 在調用的那邊可以拿到(catch)你想返回的錯誤信息 } ) // response 響應攔截器 axios.interceptors.response.use(res => { tryHideLoading() if (res.data.code === 10002) { MessageBox.alert('登陸信息超時,請重新登陸!', '登陸超時', { confirmButtonText: '跳轉到登陸頁面', callback: () => { // 確定跳轉到登陸頁面后,清除用戶的登陸信息 sessionStorage.removeItem('userInfo') window.location.href = '/' } }) } else { return res.data } }, err => { loading.close() if (err && err.response) { switch (err.response.status) { case 400: err.message = '請求錯誤' break case 401: err.message = '未授權,請登錄' break case 403: err.message = '拒絕訪問' break case 404: err.message = `請求地址出錯: ${err.response.config.url}` break case 408: err.message = '請求超時' break case 500: err.message = '服務器內部錯誤' break case 501: err.message = '服務未實現' break case 502: err.message = '網關錯誤' break case 503: err.message = '服務不可用' break case 504: err.message = '網關超時' break case 505: err.message = 'HTTP版本不受支持' break default: } } console.error(err) return reject(err) // 返回接口返回的錯誤信息 } ) // 請求處理 axios(options).then(res => { resolve(res) return false }).catch(error => { reject(error) }) }) }
此時再調此接口時