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
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
jQuery 3.0正式发布
jQuery 基金会刚刚发布了该 Java 框架的 3.0 版本,并且首次抛弃了对老旧的 IE 浏览器的支持。jQuery 3.0 的工作始于 2014 年 10 月,其最初目标是在 2.0 版本之上进行完善,并和遥远的 1.0 版代码说再见——因为要兼容 IE 的缘故,其已经臃肿不堪。jQuery 2.0 已经与 1.0 版本完全不兼容,而 3.0 也将继续这一路线。
-
HTML 面试知识点总结
本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记,如果出现错误,希望大家指出!
-
亚马逊推出“无需收银员”的新技术,以此帮助品牌和广告商提高销量
北京时间 6 月 30 日早间消息,据报道,亚马逊发明了一种无需收银员的技术,可以加快人们去杂货店或便利店的速度。现在,该公司希望利用这个跟踪系统来帮助品牌和广告商提高销量。&
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
- 点击排行
- 站长推荐
- 猜你喜欢
- JS 移动端双击缩放,拖动,双指缩放的解决方案
- ssh链接远程服务器配置
- “先买后付”独角兽 Klarna 寻求新一轮融资,估值或只有 60 亿美元
- js 在本地调用电脑的摄像头
- rem 响应式布局公式
- H5拖拽文件上传
- sqlalchemy.exc.ArgumentError: Could not parse rfc1738 URL from string
- Dockerfile部署执行脚本的时候,yarn报The engine “node“ is incompatible with this module.
- linux终端中,scp在本机和服务器之间如何交互
- Node—requireDirectory实现路由自动加载
- 网站信息
- 站内问答:12篇
- 站内文章:212篇
- 建站时间:已运行1107天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据