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 ...
随机推荐
- ORA-12541:TNS:无监听程序
1.OracleServiceORCL确认已经在服务中启动 2.OracleOraDb11g_home1TNSListener确认已经在服务中启动 3.服务端listener.ora和tnsnames ...
- python入门(十五):装饰器
1.装饰器(decorator):设计模式 作用:给不同的函数和方法,增加不同的公用的功能. @classmethod,@staticmethod等均是装饰器 定义一个装饰函数,函数必须返回一个闭包函 ...
- Excel VBA ——字典实用技巧
最近写了一些小功能,对字典有了进一步的理解,太强大了! 个人最近用过的字典应用有这么几个,写下来防止自己忘~同时方便大家 一.查找重复行 [原理]利用字典的exist方法,将数据加入字典时判断一下,如 ...
- cnpm install -g live-server 安装服务
cnpm install -g live-server 指令会在浏览器自动打开页面
- Servlet第一篇(Tomcat)
Tomcat 什么是Tomcat Tomcat简单的说就是一个运行JAVA的网络服务器,底层是Socket的一个程序,它也是JSP和Serlvet的一个容器. 为什么我们需要用到Tomcat 提供能够 ...
- 关于fftshift----将零频率的分量移到频谱的中心
fftshift 作用:将零频点移到频谱的中间 用法: Y=fftshift(X) Y=fftshift(X,dim) 描述:fftshift移动零频点到频谱中间,重新排列fft,fft2和fftn的 ...
- linux下进程绑定cpu情况查看的几种方法
1.pidstat命令 查看进程使用cpu情况,如果绑定了多个cpu会都显示出来 pidstat -p `pidof 进程名` -t 1 2.top命令 (1)top (2)按f键可以选择下面配置选项 ...
- Codeforces Round #552 (Div. 3) F题
题目网址:http://codeforces.com/contest/1154/problem/F 题目大意:给出n,m,k,n是物体的个数,m是优惠方式的种数,k是需要购买的物体个数, 然后给出n个 ...
- vue父子组件实现v-model
话不多说,直接上代码 <div id="app"> <price-input v-bind:value="price" v-on:input= ...
- 七牛存储qshell工具
---恢复内容开始--- 工具地址:https://developer.qiniu.com/kodo/tools/1302/qshell 下载完成后:根据自己的系统选择需要的可执行文件,支持linux ...