import axios from 'axios'
/**
* @description: 用法
* @param {String} url 请求路径
* @param {Object} params 参数 (直接传就行,内部已做处理)
* @param {Object} options 配置项(可以覆盖默认值)
* @param {Boolean} loading 是否启用 loading
* @return:
*/
// demo
// get(url, params, options, loading)
// get("aaa/bbb", { a: b }, { baseURL: "xxx", timeout: 2000 }, false)
// post("aaa/bbb", { a: b }, { baseURL: "xxx", timeout: 2000 }, false)
// 实例化默认设置
let axiosInstance = axios.create({
timeout: 15000,
baseURL: '/abc/',
headers: {
"content-type": "application/json;charset=utf-8"
}
})
// 请求拦截(可以在这里添加每次请求都携带的参数)
axiosInstance.interceptors.request.use(
config => {
// 登录流程控制中,根据本地是否存在token判断用户的登录情况
// 但是即使token存在,也有可能token是过期的,所以在每次的请求头中携带token
// 后台根据携带的token判断用户的登录情况,并返回给我们对应的状态码
// 而后我们可以在响应拦截器中,根据状态码进行一些统一的操作。
// const token = store.state.token;
// token && (config.headers.Authorization = token);
return config
},
err => Promise.reject(err)
)
// 提取公共方法【3】
const common = (o, loading) => {
if (loading === true) __LOADING__(true)
return axiosInstance(o)
// 状态码 2xx 此处为网络请求的状态码,后台返回的状态码在内层 res.data 中
.then(res => {
if (res.status === 200 && res.data.success === true) {
return Promise.resolve(res)
} else {
return Promise.reject(res) // 注意这里是 reject,抛出的错误会在下面的 catch 抓取,因此这里无需错误提示
}
})
// 状态码 !=2xx
.catch(err => {
__MSG__(err.data.message||"请求异常")
return Promise.reject(err)
}).finally(() => {
if (loading === true) __LOADING__(false)
})
}
// 核心处理 【2】
const core = method => {
let o = null;
if (method === "get") {
return (url, params, options, loading = true) => {
// 处理请求参数,get / post 方法区别在于 params 和 data 字段
o = {
url, method, params, ...options
}
// 传入请求相关参数 和 loading 开关
return common(o, loading)
}
} else if (method === "post") {
return (url, data, options, loading = true) => {
o = {
url, method, data: data || {}, ...options // 这里必须对 data 进行处理,否则会导致 content-type 无效
}
return common(o, loading)
}
}
}
// 【1】
const get = core('get')
const post = core('post')
export { axiosInstance, get, post }
axios 二次封装
最后编辑于 :
?著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事?!?“怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 写在前面 作者简书地址axios在实战项目中的运用,所举例项目是基于vue全家桶(vue-router+vuex+...
- 一、基于框架:vue二、基于http库:axios三、基本用法:1.通过node安装: 2. 在项目目录的src文...
- 01 博客作者尤寺净在文章中谈到过一个同事。 她和这位同事在公司里并无交集, 但上班时常?;嵩诘缣堇锱龅剿?。 如果...