Vue自用axios封装
[本文出自天外归云的博客园]
这是我的Vue项目中的request.js文件,请求报错了看console就会有具体请求信息,方便调试。分享一下。
其中用到了axios和element-ui的组件,axios是用来收发请求的,element-ui中的Message和Loading组件主要是配合axios对请求中和请求失败的情况在页面上进行可视化配合。
代码如下:
import axios from 'axios'
import { Message, Loading } from 'element-ui' let loading
let needLoadingRequestCount = 0 function startLoading () {
loading = Loading.service({
lock: true
})
} export function showLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
} export function hideLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
loading.close()
}
} const instance = axios.create({
baseURL: process.env.BASE_API,
timeout: 150000,
headers: { 'Content-Type': 'application/x-www-form-urlencoded;' }
}) instance.interceptors.request.use(
function (config) {
console.log('[发起请求]' + JSON.stringify(config.data))
showLoading()
return config
},
function (error) {
return Promise.reject(error)
}
) instance.interceptors.response.use(
response => {
const res = response.data
if (res.retcode !== 200) {
// Message({
// message: '[接口返回非200异常]请重新刷新页面',
// type: 'error',
// duration: 5 * 1000
// })
hideLoading()
return Promise.reject(new Error('返回非200')).catch(
console.log('[请求]' + response.config.data + '\n[返回异常]' + res)
)
} else if (JSON.stringify(res.data) === '{}') {
return Promise.reject(new Error('no data'))
.then(result => console.log(result))
.catch(error => console.log(error))
} else {
hideLoading()
return res.data
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error).catch(console.log(error))
}
) export default instance
其中process.env在config/dev.env.js中定义:
Vue自用axios封装的更多相关文章
- 【Vue】axios封装,更好的管理api接口和使用
在现在的前端开发中,前后端分离开发比较主流,所以在封装方法和模块化上也是非常需要掌握的一门技巧.而axios的封装也是非常的多,下面的封装其实跟百度上搜出来的axios封装或者axios二次封装区别不 ...
- vue项目-axios封装、easy-mock使用
vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...
- vue项目 axios封装第二弹
import axios from "axios"; import qs from "qs"; import { Message, MessageBox } f ...
- vue2.0 如何自定义组件(vue组件的封装)
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- vue中axios 配置请求拦截功能 及请求方式如何封装
main.js 中: import axios from '................/axios' axios.js 中: //axios.js import Vue from 'vue' i ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- Vue笔记:封装 axios 为插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
随机推荐
- markdown那些事儿
markdown是一种轻量标记语言,可以用多种编辑器来写markdown语法. 一.基础链接 http://www.markdown.cn/ https://zh.wikipedia.org/wiki ...
- 并发编程之I/O模型
1.I/O模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个 ...
- 双11线上压测netty内存泄露
最近线上压测,机器学习模型第一次应用到线上经历双11大促.JSF微服务有报错 LEAK: ByteBuf.release() was not called before it's garbage-co ...
- 【树形期望DP】BZOJ3566- [SHOI2014]概率充电器
[题目大意] 充电器由 n-1 条导线连通了 n 个充电元件.这n-1条导线均有一个通电概率p%,而每个充电元件本身有直接被充电的概率q[i]%.问期望有多少个充电元件处于充电状态? [思路] 第一次 ...
- Java转型
集合转型 通过中间类型List List<String> strs=new ArrayList<>(); List list=(List)strs; List<Objec ...
- 同步方法、同步代码块、volidate变量的使用
当多个线程涉及到共享数据的时候,就会设计到线程安全的问题.非线程安全其实会在多个线程对同一个对象中的实例变量进行并发访问时发生,产生的后果就是“脏读”.发生脏读,就是取到的数据已经被其他的线程改过了. ...
- [Codeforces113C]Double Happiness(数论)
题意 给定闭区间[l,r] [l,r] [l,r],找出区间内满足t=a2+b2 t=a^{2}+b^{2} t=a2+b2的所有素数t t t的个数( a,b a,b a,b为任意正整数). 思路 ...
- 文件处理(如果文件存在则追加,不存在则生成多级文件夹以及txt目录)
public static void writeFile(String path,String fileName,String content) throws IOException { File f ...
- Java 深复制和浅复制
浅复制是指复制对象时仅仅复制对象本身(包括对象中的基本变量),而不复制对象包含的引用指向的对象.深复制不仅复制对象本身,而且复制对象包含的引用指向的对象. 复制对象时需要调用Object类的clone ...
- tfs2015 生成与发布 配置
先来看一张微软官方的自动生成与发布架构图,以便了解很多概念间的关系 1.安装好TFS2015(可以参考TFS2010的安装过程,尤其是账号权限相关),我自己是从TFS2010一路升级上来的(TFS20 ...