Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn
vue中axios的封装
在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs.com/package/axios。
浅谈在项目中axios的简单二次封装
安装
npm install axios; //安装axios
//cnpm install axios;//或者使用镜像下载.
引入组件
通常情况下,在项目src目录下创建request文件夹,然后创建http.js和api.js文件。
- http.js用来二次封装axios;
- api.js用来统一管理后端接口;
在http.js文件中
- 引入axios;
- 引入qs,用于序列化post类型的数据。
- 引入ui提示框,根据自己u进行修改;推荐elementui文档
环境切换
在http.js的文件中的axios.defaults.baseURL可以设置axios的默认请求地址。配合不同的运行指令进行开发不同环境的数据。
另附配置vue不同环境配置不同打包命令
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}
请求默认值的设置
通过axios.defaults.timeout设置默认的请求超时时间。
//设置默认的请求超时时间
axios.defaults.timeout = 10000;
设置默认请求头和token
//设置post的请求头
axios.defaults.headers.post['Content-Type'] = 'application/json';
//设置默认token 一般有权限不在这里设置
//axios.defaults.headers.Authorization=token;
请求拦截
token拦截
一般情况下,发送请求必须带有token进行验证。做权限的话这里需要注意。
axios.interceptors.request.use(
config => {
let token = localStorage.getItem("header");
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
config.headers.token = `${token}`;
}
return config;
},
err => {
this.$router.push("/login")
return Promise.reject(err);
});
响应拦截
这里需要根据后端协商,根据后端返回状态码进行处理
axios.interceptors.response.use(function (response) {
if (response.status >= 400) {
localStorage.clear();// 删除已经失效或过期的token(不删除也可以,因为登录后覆盖)
router.replace({
path: '/login', // 到登录页重新获取token
query: {
//回到当前页面
redirect: router.currentRoute.fullPath
}
})
}
return response
}, function (error) {
if (error.response) {
if(error.response.status===403){
Message({
showClose: true,
message: '登录过期',
type: 'error'
});
localStorage.clear();
Cookies.set("user","",-10);
router.replace({
path: '/login' // 到登录页重新获取token
})
}else if(error.response.status===405){
Message({
showClose: true,
message: '权限不足,请联系管理员',
type: 'warning'
});
router.replace({
path: '/error',
})
}else if(error.response.status===500){
Message({
showClose: true,
message: '服务器异常',
type: 'error'
});
}
}
return Promise.reject(error)
})
封装get和post方法
axios封装的方法有很多,比如get,post,delete,put等方法。这里简单介绍get和post的封装。
post
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
get
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
vue中api的封装
首先在api.js中引入在http.js中封装的get和post两种方法。
import { get, post } from './http'
不同参数的封装接口方法
export const Login = p => get('/api/admin/login', p);
export const Registry = p => post('/api/admin/registry', p);
//路径参数封装
//export const Api= p => post('/api/'+ p);
//多参数封装
export const Api=( p,q )=> post('/api/'+ p+“/"+q);
页面中使用方法
import { Login,Registry } from "@/request/api"
export default {
name:"app",
data(){
return{
message:{
uname:"",
upwd:""
}
}
},
methods:{
login(){
Login(this.message).then(res=>{
....请求成功的处理
})
}
}
}
例外附上:
Vue中axios的封装和api接口的统一管理的更多相关文章
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- vue中axios使用封装
一.在main.js导入 // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype.$axios = axios; import QS f ...
- vue中axios的封装
第一步还是先下载axios cnpm install axios -S 第二步建立一个htttp.js import axios from 'axios'; import { Message } fr ...
- vue中axios复用封装
ajax2: function() { let that = this; return that .$http({ method: "get", url: "/Home/ ...
- vue中axios的封装(注意这里面异步的概念和用法十分重要)
todo https://www.cnblogs.com/chaoyuehedy/p/9931146.html
- 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: // 引入模 ...
随机推荐
- SpringBoot区块链之以太坊开发(整合Web3j)
最近公司需要ETH兑换功能,ETH转账需要区块打包,这个时候就需要区块检测,目前只是简单整合,后面会将区块自动检测代码上传致QQ群 对于区块链开发不太熟悉的童鞋,可以看看:[区块链开发(零)如何开始学 ...
- java线上cpu、内存问题排查方法
一.线程 查进程中占用cpu高的线程 ps -mp xxxxx -o THREAD,tid,time | sort -rn 将线程的id从10位转到16位,可以在下面jstack中找到对应线程 输出线 ...
- HTML表格列表简介
HTML简介: html列表: ol标签:order list 有序列表. ul标签:unorder list 无序列表. li标签:list item 列表项. style属性: 标签内写css表达 ...
- svn新建文件不能提交的解决方法
svn新建文件不能提交的解决方法 在当前新建文件的目录下,右键空白处: 选择Properties 找到所有有ignore字眼的属性,查看这个属性的继承目录(inherited from),入我的是cl ...
- 夯实Java基础系列6:一文搞懂抽象类和接口,从基础到面试题,揭秘其本质区别!
目录 抽象类介绍 为什么要用抽象类 一个抽象类小故事 一个抽象类小游戏 接口介绍 接口与类相似点: 接口与类的区别: 接口特性 抽象类和接口的区别 接口的使用: 接口最佳实践:设计模式中的工厂模式 接 ...
- [python]python的异常处理
异常处理:首先了解异常,程序出现逻辑错误或者用户输入不合法都会引发异常,而这些异常并不是致命的所以不会导致程序崩溃死掉.可以利用Python提供的异常处理机制在异常出现时及时捕获,并从内部自我消化. ...
- CentOS 8 正式发布
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net] 本文地址:https://www.oschina.net/news/110111/centos-8-re ...
- Redis 主从,哨兵,集群实战
下载地址及版本说明 Redis 各版本下载地址: http://download.redis.io/releases/ 版本说明:一般来说版本号第二位,偶数是稳定版本,奇数是在开发中的版本 本文基于R ...
- Apache和Tomcat 配置负载均衡(mod-proxy方式)-粘性session
Tomcat集群配置后端Tomcat Server为支持AJP的独立服务,前端Apache配置为粘性会话(sticky-session),Tomcat不配置Cluster配置和Session复制. 配 ...
- springboot 项目打包部署后设置上传文件访问的绝对路径
1.设置绝对路径 application.properties的配置 #静态资源对外暴露的访问路径 file.staticAccessPath=/upload/** #文件上传目录(注意Linux和W ...