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 ...
随机推荐
- MyBatis使用注解方式实现CRUD操作
一.使用注解后就不需要写SysGroupDaoMapper.xml 只需要在Dao的抽象方法前加上相应的注解就可以. package cn.mg39.ssm01.dao; import java.ut ...
- 导入C文件Xcode出现Could not build module 'Foundation'错误
#ifdef __OBJC__ #import <Foundation/Foundation.h> #import "UIImageView+WebCache.h" # ...
- nginx + gunicorn + django 2.0 踩坑
部署踩坑 部署踩坑提前准备服务器端准备安装nginx使用uwsgi部署使用gunicorn配置配置nginx配置django中的路径url 提前准备 在本地能够 python(3) manage.py ...
- termios, tcgetattr, tcsetattr, tcsendbreak, tcdrain, tcflush, tcflow, cfmakeraw, cfgetospeed, cfgetispeed, cfsetispeed, cfsetospeed - 获取和设置终端属性,行控制,获取和设置波特率
SYNOPSIS 总览 #include <termios.h> #include <unistd.h> int tcgetattr(int fd, struct termio ...
- ICPC2008哈尔滨-E-Gauss Elimination
题目描述 Li Zhixiang have already been in “Friendship” ocean-going freighter for three months. The excit ...
- Linux的一些命令总结
启动终端: ctr+alt+t 终端字体放大: ctr+shift+'+',终端字体缩小: ctr+'-' ls: 查看当前目录下的文件信息 pwd: 查看目录所在的路径 touch: 创建文件 mk ...
- springMVC+freemarker整合
转自:http://angelbill3.iteye.com/blog/1980904 在springMVC的项目中,加入freemarker 1.首先导入springMVC-webmvc所需的JAR ...
- scrollHeight与offsetHeight
offsetXxx 是 HTMLElement 的属性, HTMLElement 接口表示所有的 HTML 元素,scrollXxx 是 Element 的属性,Element 是一个通用性非常强的基 ...
- iftop简单使用
在linux下想查看当前与主机通信的IP有哪些?流量多少?怎么办?使用iftop吧,小巧实用的小工具.在排查问题的时候能起到大作用. centos安装 yum install iftop 界面如下: ...
- Android中的Toast重复显示的问题
Toast是Android中用来显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点,而且Toast显示的时间有限,过一定的时间就会自动消失. Toast一般用来提示用户的误操作.但是如 ...