http请求拦截器

 

Vue添加请求拦截器

一、现象

统一处理错误及配置请求信息

 

二、解决

1、安装 axios  , 命令： npm install axios --save-dev

2、在根目录的config目录下新建文件 axios.js  ，内容如下：

import axios from 'axios'

// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'    

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
　　// 在发送请求之前做些什么
　　return config
}, function (error) {
　　// 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
　　// 对响应数据做点什么
　　return response
}, function (error) {
　　// 对响应错误做点什么
　　return Promise.reject(error)
});

 

3、在main.js中进行引用，并配置一个别名（$ajax）来进行调用:

import axios from 'axios'
import '../config/axios'

Vue.prototype.$ajax = axios

如图：

 

 

4、应用，一个登录的post如：

this.$ajax({
　　method: 'post',
　　url: '/login',
　　data: {
　　　　'userName': 'xxx',
　　　　'password': 'xxx'
　　}
}).then(res => {
　　console.log(res)
})

三、总结

统一处理方便

 

 

分类:  Vue

标签:  Vue添加请求拦截器,  Vue拦截器,  Vue添加http拦截器

好文要顶  关注我  收藏该文   

小老虎网络
关注 - 1
粉丝 - 19

 

 

+加关注

0

0

 

 

 

« 上一篇： Vue添加jquer插件

posted on  2017-11-23 15:14 小老虎网络 阅读(330) 评论(0) 编辑 收藏

 

 

刷新评论刷新页面返回顶部

发表评论

昵称：

评论内容：

         

 

 退出 订阅评论

 

[Ctrl+Enter快捷键提交]

 

【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018！
【活动】杭州云栖·2050大会-全世界年青人因科技而团聚-源点
【抢购】新注册用户域名抢购1元起

 

最新IT新闻:
·  浙大90后学霸的首篇一作登上Science！这个团队的研究还很接“地气”！
·  谷歌搜索开始猜你问什么 为语音搜索打下基础
·  HoloLens之父Alex Kipman：2018年MR有这三大趋势
·  微软Teams终于上线访客功能
·  Slack竞品：Google宣布Hangouts Chat正式上线
»  更多新闻...

最新知识库文章:

·  写给自学者的入门指南
·  和程序员谈恋爱
·  学会学习
·  优秀技术人的管理陷阱
·  作为一个程序员，数学对你到底有多重要

»  更多知识库文章...

 

Powered by: 
博客园 
Copyright ©2018 小老虎网络

小老虎网络工作室-htmlx.club  jorn-工匠 myQQzone 腾讯微博 点滴生活  素材网 人人网  前沿课程教室 原创漫画

转载于:https://www.cnblogs.com/yhl-0822/p/8489375.html