axios较常用的全局配置

news/2024/7/11 1:48:07 标签: javascript, 前端, axios, es6
javascript">axios.defaults.baseURL = '域名';
if (localStorage.phone) axios.defaults.headers.common['phone'] = JSON.parse(localStorage.phone);//请求头全局配置
if (localStorage.token) axios.defaults.headers.common['token'] = JSON.parse(localStorage.token);//请求头全局配置
// axios.defaults.headers.common['phone'] = localStorage.phone.slice(1, localStorage.phone.length - 1);
// axios.defaults.headers.common['token'] = localStorage.token.slice(1, localStorage.token.length - 1);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//请求头全局配置
axios.defaults.transformRequest = [function(data, headers) {//传入参数的全局配置
    if (data instanceof FormData) return data;
    else if (data instanceof Object) return Qs.stringify(data);
    else return data;
}];

// 添加请求拦截器
axios.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    if (response.data.ret === 200) {
        return response.data;
    } else if (response.data.ret === 300) {
        location.href = 'login.html';
    } else {
        return response.data.msg;
    }
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

http://www.niftyadmin.cn/n/854586.html

相关文章

百度地图API的使用

首先先注册百度地图开放平台开发者账户 申请地址http://lbsyun.baidu.com/apiconsole/key 其次在应用管理里我的应用下进行创建应用 这里应用类型作为前端人员选择浏览器端,Referer白名单可以写*,表示访问无限制 接下来就可以参考javascriptAPI文档来…

Base64加密实战

首先先引入Base64.js文件 https://cdn.jsdelivr.net/npm/js-base643.7.2/base64.min.js base64对于空格等特殊符号的加解码更加完善,不会像原生js中的加解码会在解码时出现一些小问题。 /*** 登录状态*/ function loginStatus() {const checkbox document.queryS…

ES5方法对各种接口的整体封装

const API {user: {/*** description 验证手机号码* data* returns <AxiosPromise>*/verifyPhone: function(data) {return axios.post(/user/verifyPhone.php, data);},/*** description 获取手机验证码* data* returns <AxiosPromise>*/sms: function(data) {re…

ES6——Symbol(理解和使用)

1. 概念&#xff1a; symbol 是一种基本数据类型 &#xff08;primitive data type&#xff09;。Symbol()函数会返回symbol类型的值&#xff0c;该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象&#xff1b;它的静态方法会暴露全局的symbol注册&#xf…

Vue:el与data的两种写法

data与el的2种写法 1.el的两种写法 (1)new Vue时候配置el属性 (2)先创建Vue实例&#xff0c;随后再通过vm.$mount(’#root’)指定el的值【可以对其进行一些操作】 2.data的两种写法 (1)对象式 (2)函数式 如何选择&#xff1a;学到组件时&#xff0c;data必须使用函数式&…

Vue中的MVVM模型及数据代理

MVVM模型 1.M&#xff1a;模型(Model)&#xff1a;data中的数据 2.V&#xff1a;视图(View)&#xff1a;模板代码 3.VM&#xff1a;视图模型(ViewModel)&#xff1a;Vue实例 Vue中&#xff1a; 1.data中所有的属性&#xff0c;最后都出现在了vm身上 2.vm身上所有的属性 及 V…

vue-router总结

vue-router的理解&#xff1a; vue的一个插件库&#xff0c;专门用来实现SPA应用对SPA应用的理解 1.单页Web应用(single page web application,SPA) 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面&#xff0c;只会做页面的局部更新 4.数据需要通过ajax请…

webStorage小结

webStorage 1.存储内容一般支持5MB左右(不同浏览器可能还不一样) 2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制 3.相关API&#xff1a;1.setItem(key,value)2.getItem(key,value)3.removeItem(key,value)4.clear() 4.备注&#xff1a;1.s…