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
收藏
上一篇:
axios请求缓存+防止重复提交
暂无评论信息
- 相关文章
- 文章推荐
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
半导体短缺即将结束?分析师:如果没有 1 美元芯片会影响更多
德勤咨询(Deloitte Consulting)的芯片分析师认为,随着芯片行业资本支出的增加,需求度较高的工厂已经开工,预示着短缺情况即将结束。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
- 点击排行
- 站长推荐
- 猜你喜欢
- Meta放缓招聘:今年工程师招聘规模削减约三成降至七千人
- 科技巨头员工面临缩减,谷歌 CEO:艰难时期要更具创业精神、更具饥饿感
- 淘宝 NPM 镜像站喊你切换新域名啦
- 90 后 CTO 如何成为国内首位女性 Apache Member?
- mongodb中的objectId和字符串id之间的转换
- NoSQL数据库的意义
- 查看uwsgi进程和杀死进程
- 程序员如何摆脱35岁困境?SoFlu软件机器人助你成为全栈工程师
- vue3.2 + typescript中代码提示(赋值表达式的左侧不能是可选属性访问)的解决方式
- 群晖nas docker安装bitwarden,并实现ssl证书,可以访问并能注册登录的问题
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据