vue中axios的封装以及简单使用
一、axios的封装
在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装:
1、新建http.js模块
import axios from 'axios' // 设置基础apiUrl
axios.defaults.baseURL = 'http://127.0.0.1:8000/'; export default {
install: function (Vue) {
Object.defineProperty(Vue.prototype, '$http', {value: axios})
}
}
2、在main.js中导入
此时vue实例中已经有$http方法了
import MyServerHttp from './plugins/http.js' Vue.use(MyServerHttp);
3、在需要的地方进行调用
async editUser(context, object) {
//进行调用,其中object._this为vue实例
const res = await object._this.$http.put(`crm/user/${object.userId}`, object.form);
const {data, meta: {message, code}} = res.data;
if (code === 2000) {
context.dispatch("getAllUserList", {_this:object._this});
object._this.editDialogFormVisible = false;
object._this.$message.success(message);
}
},
二、拦截器的使用
拦截器是在发送请求之前做一些动作,比如将将token从localstorage中获取添加到请求头中。
// 拦截request,/ 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if (config.url !== "login") {
config.headers['Authorization'] = localStorage.getItem("token");
} return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
三、响应器的使用
响应器是对响应的内容提前做一些过滤之类的动作,然后返回。
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么 const res = response.data; if (res.count) return response if (res.meta.code) {
if (res.meta.code === 2002) {
//如果返回的code === 2002,就返回无权限查看内容,不需要将整个response返回
Message.warning("无权查看对应数据")
}
return response } else {
return response;
} }, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
完整封装代码:
import axios from 'axios'
import {Message} from 'element-ui'; // const MyHttpServer = {}; // MyHttpServer.install = (Vue) => {
//
// // axios.baseURL = 'http://127.0.0.1:8000/';
//
// //添加实例方法
// Vue.prototype.$http = axios
//
// };
//
// export default MyHttpServer // 设置基础apiUrl
axios.defaults.baseURL = 'http://127.0.0.1:8000/'; axios.defaults.withCredentials = true; // 允许携带cookie // 拦截request,/ 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
if (config.url !== "login") {
config.headers['Authorization'] = localStorage.getItem("token");
} return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么 const res = response.data; if (res.count) return response if (res.meta.code) {
if (res.meta.code === 2002) {
//如果返回的code === 2002,就返回无权限查看内容,不需要将整个response返回
Message.warning("无权查看对应数据")
}
return response } else {
return response;
} }, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}); export default {
install: function (Vue) {
Object.defineProperty(Vue.prototype, '$http', {value: axios})
}
}
http.js
vue中axios的封装以及简单使用的更多相关文章
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- 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的深入使用
如上所示一条简单的请求数据,用到了vue中axios,promise,qs等等 这里我将vue中用到的axios进行了封装方便日后使用 先对工具类进行封装utils/axios.js: // 引入模 ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
随机推荐
- bzoj4550 小奇的博弈
我看出了是个 Nimk 问题.... dp我明白意思,我也会推组合数.... 但是...神tm统计答案啊...蒟蒻不会~
- Python之列表转字典:setdefault、defaultdict、fromkeys
setdefault result = {} data = [("p", 1), ("p", 2), ("p", 3), ("h& ...
- springboot整合RocketMq(非事务)
1.配置文件 1.yml配置文件 rocketmq: #mq配置 producer: iseffect: true type: default # (transaction,default) tran ...
- http(python)
1.client 1) httpie http -f POST example.org hello=World http POST http://192.168.200.251:55101/Api/C ...
- ssh-keyscan - 收集 ssh 公钥
总览 (SYNOPSIS) ssh-keyscan -words [-v46 ] [-p port ] [-T timeout ] [-t type ] [-f file ] [host | addr ...
- Grafana的安装配置 和 使用nginx反向代理grafana
grafana安装和配置 grafana安装非常简单:(https://grafana.com/grafana/download) 对于有apt的服务器: # apt install -y softw ...
- Linux编译C语言程序
1.首先安装gcc包,运行C++程序,安装gcc-c++ 包 如果没有安装的自行进行安装 2.编辑C语言程序, 打印乘法口诀表 [root@Db1 c]# vim chengfa.c 在编辑界面中,输 ...
- TCP协议解析及相关问题
TCP协议是什么: TCP是一种传输控制层的协议(TCP,Transmission Control Protocol)是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议.也就是要 ...
- 在Kubernetes下部署Prometheus
使用ConfigMaps管理应用配置 当使用Deployment管理和部署应用程序时,用户可以方便了对应用进行扩容或者缩容,从而产生多个Pod实例.为了 能够统一管理这些Pod的配置信息,在Kuber ...
- webpack引入全局jQuery
1.使用命令行npm install jquery来安装jQuery 2.在webpack.config.js文件里配置: plugins:[ new webpack.ProvidePlugin({ ...