vue通用封装axios请求
分类专栏: Javascript&
简介 封装axios的请求,返回重新封装的数据格式,对错误的统一处理,以及在防止消频繁请求
<p>import axios from 'axios'</p><p><br></p><p>const CancelToken = axios.CancelToken</p><p><br></p><p>class HttpRequest {</p><p> constructor () {</p><p> this.baseUrl = process.env.NODE_ENV === 'production' ? '线上地址' : '本地地址'</p><p> this.pending = {}</p><p> }</p><p> // 获取axios配置</p><p> getInsideConfig () {</p><p> const config = {</p><p> baseURL: this.baseUrl,</p><p> headers: {</p><p> 'Content-Type': 'application/json;charset=utf-8'</p><p> },</p><p> responseType: 'json',</p><p> // 最多重发三次</p><p> retry: { retries: 3 },</p><p> timeout: 10000</p><p> }</p><p> return config</p><p> }</p><p> removePending (key, isRequest = false) {</p><p> if (this.pending[key] && isRequest) {</p><p> this.pending[key]('取消重复请求')</p><p> }</p><p> delete this.pending[key]</p><p> }</p><p> // 设定拦截器</p><p> interceptors (instance) {</p><p> // 请求拦截器</p><p> instance.interceptors.request.use((config) => {</p><p> // Do something before request is sent</p><p> let token = Cookie.get('token');</p><p> token = 'unkjnxr5slv7oks8ynor5sd8y1oc8bpv';</p><p> if (token) {</p><p> config.headers.Authorization = 'Bearer ' + token</p><p> }</p><p> let key = config.url + '&' + config.method</p><p> this.removePending(key, true)</p><p> config.cancelToken = new CancelToken((c) => {</p><p> this.pending[key] = c</p><p> })</p><p> return config</p><p> }, (err) => {</p><p> // errorHandle(err) 统一处理异常</p><p> // Do something with request error</p><p> return Promise.reject(err)</p><p> })</p><p><br></p><p> // 响应请求的拦截器</p><p> instance.interceptors.response.use((res) => {</p><p> // Any status code that lie within the range of 2xx cause this function to trigger</p><p> // Do something with response data</p><p> let key = res.config.url + '&' + res.config.method</p><p> this.removePending(key)</p><p> if (res.status === 200) {</p><p> return Promise.resolve(res.data)</p><p> } else {</p><p> return Promise.reject(res)</p><p> }</p><p> }, async (err) => {</p><p> // const result = await errorHandle(err)</p><p> // return result ? Promise.reject(result ) ? Promise.reject(err) // 统一处理异常</p><p> return Promise.reject(err)</p><p> })</p><p> }</p><p> // 创建实例</p><p> request (options) {</p><p> const instance = axios.create()</p><p> const newOptions = Object.assign(this.getInsideConfig(), options)</p><p> this.interceptors(instance)</p><p> return instance(newOptions)</p><p> }</p><p> get (url, config) {</p><p> const options = Object.assign({</p><p> method: 'get',</p><p> url: url</p><p> }, config)</p><p> return this.request(options)</p><p> }</p><p> post (url, data) {</p><p> return this.request({</p><p> method: 'post',</p><p> url: url,</p><p> data: data</p><p> })</p><p> }</p><p>}</p><p><br></p><p>export default new HttpRequest()</p><p><br></p><p><br></p><p>请求实例:</p><p>import request from '~/axios';</p><p><br></p><p>const getCategories = () => {</p><p> return request.get('/url/list')</p><p>}</p>
分享到:
转载:
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
眼镜试戴的装饰效果
开发眼镜类产品的时候需要使用试戴的功能,这里就有你需要的学习资料哦!
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:203篇
- 建站时间:已运行798天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据