vue中的axios封装
import axios from 'axios';
import { Message } from 'element-ui';
axios.defaults.timeout = 5000;
axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded'}
axios.defaults.withCredentials = true
//http request 拦截器
axios.interceptors.request.use(
config => {
// const token = getCookie('名称');注意使用的时候需要引入cookie方法,推荐js-cookie
config.data = JSON.stringify(config.data);
// if(token){
// config.params = {'token':token}
// }
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
) /**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/ export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
} /**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/ export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
} /**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/ export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
} /**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/ export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
} main.js全局引入
import axios from 'axios'
import {post,fetch,patch,put} from './utils/http'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put; 接口调用
this.$fetch('/api/v2/movie/top250')
.then((response) => {
console.log(response)
}) ---后续修改
vue中的axios封装的更多相关文章
- vue中采用axios发送请求及拦截器
这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...
- vue中使用axios与axios的请求响应拦截
VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...
- vue中对axios进行封装
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...
- vue中使用axios最详细教程
前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...
- vue中使用axios进行http通信
1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...
- vue中配置axios.js文件,发送请求
为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...
- vue中使用axios
1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...
- vue中的axios
数据的获取最常用的就是用ajax,但在vue框架中,axios则更为方便.它是基于es6的promise 以下内容引用自[最骚的就是你] 不再继续维护vue-resource,并推荐大家使用 axio ...
- vue中使用axios发送请求
我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...
随机推荐
- css 动态线条制作方案
利用 :before or :after 在元素中添加线条样式: 设置样式的过渡效果属性值: 改变width,left,transform等属性值,设置鼠标移入:hover 效果: li: ...
- Day05 -寻找自己:Ruby的self物件与singleton method
前情提要:在第四天里,我们用参赛者的例子解说实体方法与类别方法.类别中的实体物件,想要玩弄方法时,可以有三种取用方式:(跟斯斯有三种一样) 该类别所定义的实体方法. 模块中可取得的实体方法.(关于模块 ...
- idea中经常用到的快捷键
Ctrl+Alt+L 格式化代码 (但是在jsp或js中不给力,不如eclipse好用) Ctrl+G 搜索行数 Ctrl+F12 搜索方法,变量等... Ctrl+F8 ...
- 使用pycharm 出现 interpreter field is empty 完美解决方法(转载 记录)
使用pycharm 出现 interpreter field is empty 主要是因为你的电脑没有正确安装python或者安装python出错,重新下载安装覆盖就行 下载安装包:从Python的官 ...
- Linux下使用ps命令查看某个进程文件的启动位置
ps -ef|grep shutdown ls -al /proc/4170
- jquery的$(selector).each(function(index,element))和$.each(dataresource,function(index,element))的区别
$(selector).each(function(index,element)) 定义和用法 each() 方法规定为每个匹配元素规定运行的函数. $(selector).each(function ...
- python的requests模块参数详解
import requests print(dir(requests)) # 1.方法 # ['ConnectTimeout', 'ConnectionError', 'DependencyWarni ...
- json转换对象中出现null属性的解决方法
前言:当数据进行json转换时,当属性值为null时,json解析就会中断,导致接下来的数据无法正确获取.原则上来讲服务器端发送的json字符串不允许存在属性值为空的情况,但是如果服务器端发送了nul ...
- python day03_ 文件处理
一.文件操作的基本流程 计算机操作文件的过程 #1. 打开文件,得到文件句柄并赋值给一个变量 #2. 通过句柄对文件进行操作 #3. 关闭文件 1.文件的打开过程 # f被程序持有,文件被操作系统持有 ...
- VS code 代码格式整理的配置
{ "workbench.iconTheme": "material-icon-theme", "vetur.validation.template& ...