vue中配置使用axios
简单示例代码:
请求网络的js逻辑,可以放到request.js文件中,放在目录utils下;
import axios from "axios";
axios.defaults.withCredentials=true;
//创建axios实例
const instance = axios.create({
// `headers` 请求头的通用配置
headers: {
// 'X-Requested-With': 'XMLHttpRequest'
},
baseURL: 'https://localhost:8080/api',//远程的api地址
timeout: 120000, // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
withCredentials: false, // `withCredentials` 表示跨域请求时是否需要使用凭证
});
// 请求拦截器
instance.interceptors.request.use(
config => {
// 设置Content-Type、token等等
if(!config.headers["Content-Type"]){
config.headers["Content-Type"]="application/json";
}
config.headers["auth"]=localStorage.getItem("token");
//config.headers["openid"]=localStorage.getItem("openid");
return config;
},
error => {
//统一错误处理...
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
response => {
if (response.status === 200) {
if(response.data.ResultCode==401){//说明token过期或者鉴权失败
alert('鉴权失败,您将强制退出登录');
//清空token
localStorage.removeItem("token");
//跳转到登录页
return router.push('/login');
}
return response.data;
//return response; // 正常返回
} else {
return Promise.reject(reponse);
}
},
error => {
//错误处理...
return Promise.reject(error);
}
);
//http post请求
const post = (url,query) => {
return instance.post(url,JSON.stringify(query));
};
//http get请求
const get = (url,query) => {
return instance.get(url,query);
};
function request(config) {
return instance.request(config);
}
function jsonp(url, jsonp='callback') {
if (!window) console.error('当前为非浏览器环境,发送jsonp失败');
return new Promise((resolve, reject) => {
let _script = document.createElement('script');
_script.type = 'text/javascript';
let _callbackFunctionName = '__axios__yt__callback'+Date.now();
_script.src = (/\?[^=]+=/.test(url)) ? (url+'&'+jsonp+'='+_callbackFunctionName) : (url+'?'+jsonp+'='+_callbackFunctionName)
window[_callbackFunctionName] = (result) => {
resolve(result);
document.getElementsByTagName('head')[0].removeChild(_script); //删除临时script标签
window[_callbackFunctionName] = null; //删除临时回调
}
document.getElementsByTagName('head')[0].appendChild(_script);
})
}
export default {
instance,
request,
jsonp,
post,get
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2017-05-05 了解使用nginx