在同一个项目中灵活运用application/json 和application/x-www-form-urlencoded 两种传输格式(配合axios,同时配置loading)
'use strict' import axios from 'axios' // import qs from 'qs' import { Notification} from 'element-ui' //使用elementui的提示显示 import { Loading } from 'element-ui' import router from "../router"; let loading function startLoading() { loading = Loading.service({ lock: true, text: '加载中……', background: 'rgba(0, 0, 0, 0.2)', }) } function endLoading() { loading.close() } let needLoadingRequestCount = 0 export function showFullScreenLoading() { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++ } export function tryHideFullScreenLoading() { if (needLoadingRequestCount <= 0) return needLoadingRequestCount-- if (needLoadingRequestCount === 0) { // setTimeout(()=>{ endLoading() // },1000) } } axios.interceptors.request.use(config => { showFullScreenLoading() return config }, err => { return Promise.resolve(err) }) axios.interceptors.response.use(response => { tryHideFullScreenLoading() if (response) { switch (response.data.code) { case 4011: //与后台约定登录失效的返回码,根据实际情况处理 sessionStorage.removeItem(''); sessionStorage.removeItem(''); router.replace({ path: '/' }) } } return response }, err => { return Promise.resolve(err) }) let base = '' // 接口地址 export const postRequest = (url, params,Func,isJson) => { //url: 接口名 ,params: 参数 ,Func: 直接取得内容data,isJson:决定取哪种格式 request(url, params,'post',Func,isJson) } export const request = (url, params,method,Func,isJson) => { axios({ method: method, url: `${base}${url}`, data: params, timeout: 6000,
// 格式的转化 transformRequest: [function (data) { let ret = '' for (let it in data) { if(isJson === 1 ){ ret = data[it] }else{ ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } } return ret }],
// 请求头携带信息,类型默认为form,键值模式,传参为1 headers: { 'Content-Type': isJson === 1 ? 'application/json' : 'application/x-www-form-urlencoded', 'authorization': sessionStorage.getItem(''), 'token': sessionStorage.getItem('token') } }).then(data=>{ if (data.data.code === 200) { Func(data.data.data) }else if(data.data.code === 406){ Notification.info({ title: '错误', message: data.data.message }) }else if(data.data.code === 4011){ sessionStorage.removeItem(''); sessionStorage.removeItem(''); // window.location.href = '/' }else if(data.data.code === 4012){ request('',{ 'authorization': sessionStorage.getItem(''), 'refresh_token': sessionStorage.getItem('') },'post',(res)=>{ //缓存新的token console.log(res) let token = res.token; sessionStorage.setItem("token", token); request(url, params,method,Func); }); }else if(data.data.code === 400 || data.data.code === 505 || data.data.code === 404|| data.data.code === 500){ Notification.error({ title: '错误', message: '网络异常' }) }else{ Func1(data.data.code,data.data.message); } }) } export const uploadFileRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, headers: { 'Content-Type': 'multipart/form-data', //上传文件的传输格式 'authorization': sessionStorage.getItem('userName'), 'token': sessionStorage.getItem('token') } }) }
// 方式1, export const getRequest = (url, params,Func,isJson) => { request(url, params,'get',Func,isJson) }
// 方式2
export const getRequest = (url,params,Func) => {
return axios({
method: 'get',
url: `${base}${url}`,
headers: {
'Content-Type': 'multipart/form-data',
'authorization':sessionStorage.getItem(''),
'token':sessionStorage.getItem('token')
}
}).then(data=>{
if (data.data.code === 200) {
Func(data.data.data)
}
})
}
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!