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封装的更多相关文章

  1. vue中采用axios发送请求及拦截器

    这几天在使用vue中axios发送get请求的时候很顺手,但是在发送post请求的时候老是在成功的回调函数里边返回参数不存在,当时就纳闷了,经过查阅资料,终于得到了解决方案,在此做一总结: 首先我们在 ...

  2. vue中使用axios与axios的请求响应拦截

    VUE中使用Axios axios的安装 npm install axios vue-axios axios在vue的配置与使用 在main.js中引入axios和vue-axios import a ...

  3. vue中对axios进行封装

    在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...

  4. vue中使用axios最详细教程

    前提条件:vue-cli 项目 安装: npm npm 在main.js导入: // 引入axios,并加到原型链中 import axios from 'axios'; Vue.prototype. ...

  5. vue中使用axios进行http通信

    1.安装 npm install axios 2.在main.js中全局注册 // axios不可以通过use引入,可以通过修改vue原型链 import axios from 'axios' Vue ...

  6. vue中配置axios.js文件,发送请求

    为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等 下面是我配置的最基础的axios文件 第一步:首先新建一个axios文件,我是放在router文件下的 im ...

  7. vue中使用axios

    1.结合vue-axios使用 vue-axios是按照vue插件的方式去写的,那么结合vue-axios就可以使用Vue.use()这个方法import axios from 'axios' imp ...

  8. vue中的axios

    数据的获取最常用的就是用ajax,但在vue框架中,axios则更为方便.它是基于es6的promise 以下内容引用自[最骚的就是你] 不再继续维护vue-resource,并推荐大家使用 axio ...

  9. vue中使用axios发送请求

    我们知道,vue2.0以后,vue就不再对vue-resource进行更新,而是推荐axios,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 1.安装axios cnpm ...

随机推荐

  1. SQL Server扩展事件的使用ring_buffer target时“丢失”事件的原因分析以及ring_buffer target潜在的问题

    事情起因: 排查SQL Server上的死锁问题,一开始想到的就是扩展事件, 第一种方案,开profile守株待兔吧,显得太low了,至于profile的变种trace吧,垂垂老矣,也一直没怎么用过. ...

  2. 《Dare To Dream 》第三次作业--团队项目的原型设计与开发

    一.实验目的与要求 1.掌握软件原型开发技术:  2.学习使用软件原型开发工具: 二.实验内容与步骤 任务1:针对实验六团队项目选题,采用适当的原型开发工具设计团队项目原型: 任务2:在团队博客发布博 ...

  3. 使用hexo在GitHub上无法上传博客

    原以为是秘钥或者其他错误,后来发现是邮箱设置的问题 在GitHub的你账号网页上右上角,个人的登录退出的位置,找到setting: setting->emails->Keep my ema ...

  4. mongodb安装使用简单命令

    .window+x,A,管理员进入cmd.cd C:\Program Files\MongoDB\Server\3.4\bin.安装:mongod --dbpath "D:\work\DB\ ...

  5. MFC列表控件更改一行的字体颜色

    参考自(http://blog.csdn.net/ribut9225/article/details/6720639) 1.首先从CListCtrl 继承一个类,命名为CListCtrlCl 在头文件 ...

  6. Linux中Nginx安装教程

    Nginx 是一个很强大的高性能Web和反向代理服务器,它具有很多非常优越的特性: 在连接高并发的情况下,Nginx是Apache服务器不错的替代品:Nginx在美国是做虚拟主机生意的老板们经常选择的 ...

  7. 985. Sum of Even Numbers After Queries

    We have an array A of integers, and an array queries of queries. For the i-th query val = queries[i] ...

  8. 搭建vue脚手架

    1.Node.js安装 1.1下载安装 在node.js 官网下载, 根据自己电脑系统安装,一直点下一步即可 1.2测试安装是否成功 Windows+R打开cmd窗口,输入node -v回车出现版本号 ...

  9. idea报错Target JRE version (1.8.0_191) does not match project JDK version (java version "1.7"), will use sources from JDK: 1.8

    使用mac的idea 启动项目,总是报一个问题 我在idea中添加了多个jdk,项目启动的时候就只是配置了一个正确的,项目的配置完全正确.但是配置好tomcat后,启动就会报这个错误. 解决方案:需要 ...

  10. mac相关功能

    打开和关闭索引功能 打开:sudo mdutil -a -i on 关闭:sudo mdutil -a -i off 关闭后则无法搜