vue中axios的二次封装
我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理
第一步,先在src中的公共文件夹中如utils里新建request.js文件
import axios from 'axios'
import router from '@/router/routers'
import { Notification, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
import Config from '@/config' import {baseUrl} from '@/utils/env' // 创建axios实例
const service = axios.create({
baseURL: baseUrl, // api 的 base_url
// baseURL: process.env.BASE_API, // api 的 base_url
timeout: Config.timeout // 请求超时时间
}) // request拦截器
service.interceptors.request.use(
config => {
if (getToken()) {
config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
}
config.headers['Content-Type'] = 'application/json'
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
) // response 拦截器
service.interceptors.response.use(
response => {
const code = response.status
console.log(response)
if (code < 200 || code > 300) {
Notification.error({
title: response.message
})
return Promise.reject('error')
} else {
return response.data
}
},
error => {
let code = 0
try {
code = error.response.data.status
} catch (e) {
if (error.toString().indexOf('Error: timeout') !== -1) {
Notification.error({
title: '网络请求超时',
duration: 2500
})
return Promise.reject(error)
}
if (error.toString().indexOf('Error: Network Error') !== -1) {
Notification.error({
title: '网络请求错误',
duration: 2500
})
return Promise.reject(error)
}
}
if (code === 401) {
MessageBox.confirm(
'登录状态已过期,您可以继续留在该页面,或者重新登录',
'系统提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
} else if (code === 403) {
router.push({ path: '/401' })
} else {
const errorMsg = error.response.data.message
if (errorMsg !== undefined) {
Notification.error({
title: errorMsg,
duration: 2500
})
}
}
return Promise.reject(error)
}
)
export default service
代码解读:
将接口统一放到单独的文件中如我的
引入request.js
第三步,
在页面使用
好了,这就是axios的二次封装
vue中axios的二次封装的更多相关文章
- vue中axios使用二:axios以post,get,jsonp的方式请求后台数据
本文为博主原创,转载请注明出处 axios在上一篇中讲过:vue中axios使用一:axios做拦截器,axios是请求后台资源的模块,用来请求后台资源. axios本身是支持get,post请求后台 ...
- vue中axios的使用与封装
分享下我自己的axios封装axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save在 ...
- 对于vue中axios拦截器简单封装
axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if ( ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue中axios的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
- vue中axios的安装使用
axios是一个基于 promise 的 HTTP 库,在vue中axios是比较常用的网络请求方法. 安装 npm install axios -S 在main.js配置 import axios ...
- vue项目中对axios的二次封装
近来在使用vue重构公司m站时,使用了axios来进行数据的请求,由于项目的需要,对axios进行了二次封装,点击进入axios //引入axios import axios from 'axios' ...
随机推荐
- [SDOI2013]直径 题解
题面 这道题明显的一定要找到直径的具体路径,所以两遍dfs是比较好的选择: 第一问是一道弱智题吧? 主要难度全部分摊在了第二问: 其实不难,先找到任意一个直径: 对于任意一个在直径上的点: 设nxt[ ...
- VC++2017关于项目出现"const char *" 类型的实参与 "char *" 类型的形参不兼容错误的解决方法
C++项目中经常会定义如下形式的字符串: char *texts[] = { "1. Open Account", "2. To Deposit Money", ...
- T100 —— 凭证打印时排序
capr110_g01,按扣账日期打印排序: 在adzp188——“字段”中加入pmds001的话,产生的代码的变量是:pmds_t_pmds001 :当在“群组”—“印出排序” 再添加pmds001 ...
- 查看linux服务器信息
1. vmstat 查看服务器内存,CPU等信息 一般是通过两个数字参数来完成的,第一个参数是采样时间间隔,单位是秒, 第二个参数是采样的次数 r: 表示运行队列,如果队列过大说明CPU很繁忙 ...
- go install
go get使用时的附加参数 使用 go get 时可以配合附加参数显示更多的信息及实现特殊的下载和安装操作,详见下表所示. go get 使用时的附加参数 附加参数 备 注 -v 显示操作流程的日志 ...
- websocket vue
/* eslint-disable */ let tt; let count = 1; let lockReconnect = false; function isJsonString(str) { ...
- 【weixi】微信支付---微信公众号JSAPI支付
一.JSAPI支付 JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付.应用场景有: ◆ 用户在微信公众账号内进入商家公众号,打 ...
- Laravel 查询或写入Enum字段出错的bug解决办法
查询: if($request->filled('type')){ $where[] = ['type', strval(intval($request->input('type')))] ...
- js小功能3:一个简单的计算器功能
html: <input type='text' id='txt1' /> <select id='select'> <option value='+'>+< ...
- 描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
Session用于保存每个用户的专用信息. 每个客户端用户访问时,服务器都为每个用户分配一个唯一的会话ID(Session ID) . 她的生存期是用户持续请求时间再加上一段时间(一般是20分钟左右) ...