vue + axios---封装一个http请求
在使用vue开发时,官方推荐使用axios来请求接口
// axios官方地址
https://github.com/axios/axios
但是axios并不像 vue-resource 一样拥有install,即不能直接 Vue.use(axios) 来使用,所以需要我们自己根据axios来写一个具有install方法的Http库。
1.安装axios
npm install axios
2.创建Http.js文件
import axios from 'axios'
export default {
install (Vue) {
// install方法,向Vue实例中添加一个$http方法
Vue.prototype.$http = axios
Vue.$http = axios
},
$http: axios
}
export const Http = axios
3.引用
import Vue from 'vue'
import Http from './Http'
Vue.use(http)
如此,就可以在vue中直接使用axios了
4.axios拦截器
在开发过程中,会需要设置一些请求头,公共参数等,或者需要对请求结果进行统一处理(例如错误处理),这时候就可以用到axios拦截器
创建interceptor.js文件
import axios from 'axios'
let interceptor = ''
export const myInterceptor = interceptor
// 设置请求拦截器
export const setInterceptor = function (response) {
axios.interceptors.request.use((config) => {
config.headers.Authorization = token //设置请求头Authorization
config.headers.Accept = 'application/json' //设置请求头Accept
/*
具体配置需要根据实际开发情况来配置
*/
return config
})
}
// 移除请求拦截器
export const clearInterceptor = function () {
axios.interceptors.request.eject(myInterceptor)
}
ps:上例只示范了axios的请求拦截,回复拦截时同样的处理方式
ps:在interceptor中暴露myInterceptor、setInterceptor与clearInterceptor 的原因是方便随时取消与设置
5.设置axios默认请求地址
axios.defaults.baseURL = 'http://172.0.0.1'
虽说几乎都是使用webpack代理的方式来配置请求地址,但此方式依然有时会用到
原文地址:https://segmentfault.com/a/1190000017352304
vue + axios---封装一个http请求的更多相关文章
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- vue axios 封装(二)
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
- vue axios封装以及API统一管理
在vue项目中,每次和后台交互的时候,经常用到的就是axios请求数据,它是基于promise的http库,可运行在浏览器端和node.js中.当项目越来越大的时候,接口的请求也会越来越多,怎么去管理 ...
- vue中封装一个全局的弹窗js
/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...
- 使用vue.js封装一个包含图片的跑马灯组件
初衷: 学习完Vuejs后,来准备练习仿写一下老东家的门户页面,主要是为了熟悉一下常用插件的使用,比如video.js,wow.js,swiper等等:而其中涉及到一个包含图片跑马灯组件,大概长这样( ...
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- vue Axios 封装与配置项
import axios from "axios"; import qs from "qs"; import { Message } from "el ...
- 【vue+axios】一个项目学会前端实现登录拦截
原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...
- vue axios封装
前言: 对第三方库进行二次封装和抽离到统一模块,项目面对自己的模块进行开发.如果有一天更换库,只需要修改自己模块中的代码,无需对整个项目进行重构. 将axios网络请求库封装到network文件下的r ...
- vue axios 封装(一)
封装一: 'use strict' import axios from 'axios' import qs from 'qs' import NProgress from 'nprogress' im ...
随机推荐
- Net Core构建Angular4应用程序
在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序 前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1 ...
- POJ 1015 Jury Compromise dp分组
第一次做dp分组的问题,百度的~~ http://poj.org/problem?id=1015 题目大意:在遥远的国家佛罗布尼亚,嫌犯是否有罪,须由陪审团决定.陪审团是由法官从公众中挑选的.先随机挑 ...
- 使用一条sql语句查询多表的总数
SELECT sum(列名1) 列名1,sum(列名2) 列名2,sum(列名3) 列名3 FROM ( SELECT count(*) 列名1, 列名2, 列名3 FROM 表1 -- WHERE ...
- zuul prefix
经过测试,书上应该是写错了,如果要全部的路由加前缀,需要将zuul.stripPrefix=true进行设置 而不是书上所说的false
- SQL Server一个特殊的阻塞案例分析2
最近发现一个非常奇怪的阻塞问题,如下截图所示(来自监控工具DPA),会话583被会话1036阻塞,而且阻塞发生在tempdb,被阻塞的SQL如下截图所示,会话等待类型为LCK_M_S 因为DPA工具不 ...
- codeforce Gym 100500E IBM Chill Zone (SG函数)
关于sg函数这篇blog讲得很详细http://blog.csdn.net/logic_nut/article/details/4711489. sg函数的价值在于把复杂的游戏拆分成简单的游戏,然后通 ...
- UVA 246 10-20-30 10-20-30游戏 模拟+STL双端队列deque
Input Each input set consists of a sequence of 52 integers separated by spaces and/or ends of line. ...
- 使用Process组件访问本地进程
实现效果; 知识运用: Process组件的StartInfo属性 //获取或设置要传递给Process的Start方法的属性 public ProcessStartInfo StartInfo {g ...
- WINDOWS-基础:SafeArray的使用方法
1 SafeArray的作用 使用SafeArray SafeArray是VB中的数组存储方式.通过SafeArray,可以在VC++和VB间相互调用. SafeArray也是Automation中的 ...
- IE下contentWindow对象与FF、Chrome下的区别
在ie中frame(iframe)标签通过name和id获取的对象是不同的. 通过name获取的本身就是contentWindow对象.所以 在ie中不用再找contentWindow了 例: let ...