var METHOD = {
GET: 'GET',
POST: 'POST',
PUT: 'PUT',
DELETE: 'DELETE'
};var httpService = function () {
var requestAction = function requestAction(type, url, sucCb, failCb, queryBody) {
console.log(queryBody)
if (!type || !url) {
return;
}var ajaxObj = {
url: url,
type: type,
success: sucCb,
headers: {
},
error: failCb
};if ([METHOD.POST, METHOD.PUT].indexOf(type) > -1) {
if (queryBody) {
ajaxObj['data'] = JSON.stringify(queryBody);
}
} // TODO 补充请求头
$.ajax(ajaxObj);
};return {
get: function get(url, suc, fail) {
requestAction(METHOD.GET, url, suc, fail);
},
post: function post(url, suc, fail, queryBody) {
requestAction(METHOD.POST, url, suc, fail, queryBody);
},
put: function put(url, suc, fail, queryBody) {
requestAction(METHOD.PUT, url, suc, fail, queryBody);
},
delete: function _delete(url, suc, fail) {
requestAction(METHOD.DELETE, url, suc, fail);
}
};
}();
vue request.js文件的封装请求:
import axios from 'axios'
import router from '@/router/routers'
import store from '../store'
import { getToken } from '@/utils/auth'
import Config from '@/settings'
import Cookies from 'js-cookie'// 创建axios实例
const service = axios.create({
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/', // api 的 base_url
timeout: Config.timeout // 请求超时时间
})// request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
Promise.reject(error)
}
)// response 拦截器
service.interceptors.response.use(
response => {
return response.data
},
error => {
// 兼容blob下载出错json提示
if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
const reader = new FileReader()
reader.readAsText(error.response.data, 'utf-8')
reader.onload = function(e) {
const errorMsg = JSON.parse(reader.result).message
Notification.error({
title: errorMsg,
duration: 5000
})
}
} else {
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
Notification.error({
title: '网络请求超时',
duration: 5000
})
return Promise.reject(error)
}
}
if (code) {
if (code === 401) {
store.dispatch('LogOut').then(() => {
// 用户登录界面提示
Cookies.set('point', 401)
location.reload()
})
} else if (code === 403) {
router.push({ path: '/401' })
} else {
const errorMsg = error.response.data.message
if (errorMsg !== undefined) {
Notification.error({
title: errorMsg,
duration: 5000
})
}
}
} else {
Notification.error({
title: '接口请求失败',
duration: 5000
})
}
}
return Promise.reject(error)
}
)
export default service
axios请求封装(二):
import axios from 'axios';
import qs from 'qs';
function api(method,url,params,headers){
let param = {}; // 权限认证的一环,在每个请求中加入身份令牌token
if(params){
if(sessionStorage.getItem('token')){
params.token = sessionStorage.getItem('token');
} // 此处用到qs.stringify(),作用是将参数序列化为url形式(a=1&b=2) 注意与JSON.stringify()的区别
param = qs.stringify(params);
}else{
if(sessionStorage.getItem('token')){
param.token = sessionStorage.getItem('token');
}
}
const Axios = axios({
baseURL:'/',//设置有代理
url:url,
timeout:10000,
method:method,
data:method==='POST'||method==="PUT"?param:null,
params:method==='GET'||method==="DELETE"?param:null,
headers:headers?headers:{
"Content-Type":"application/x-www-form-urlencoded;charset-utf-8"
}
})
return Axios;
}export default{
get(url,params){ return api('GET',url,params,headers); },
post(url,params){ return api('POST',url,params,headers); },
put(url,params){ return api('PUT',url,params,headers); },
delete(url,params){ return api('DELETE',url,params,headers); }
}
再在main.js添加代码
import api from './api';//我在src根目录建了个api文件夹,引用会自动查找文件下的index Vue.prototype.$api = api;
用法与正常使用axios没有任何区别:
this.$api.post(url,params).then(res=>{ //处理返回的数据 })