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 = axiosVue.$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) =&gt; {config.headers.Authorization = token    //设置请求头Authorizationconfig.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请求相关推荐

uni app 调用网络打印机_uni-app封装一个request请求
在上一篇文章里面,写到使用uni.request请求的方法https://www.jianshu.com/p/bc62c9e1beed getList() { uni.request({url: &q ...
python封装一个requests请求
python封装一个requests请求更新:https://blog.csdn.net/qq_42846555/article/details/126401051 from requests im ...
vue axios封装获取微信公众号用户的openid
目录 axios封装 openid vue vue+ts axios封装一般会在项目的src目录中,新建一个文件夹,作为网络请求模块,用来封装axios, 创建axios实例: axios.crea ...
uni-app微信小程序封装一个request请求接口
在uniapp项目根目录里面新建一个文件 utils: 再新建一个api.js: //你的请求地址(线上或线下) const BASE_URL = 'https://www.baidu.com/' e ...
axios封装_VUE.JS请求工具Axios的封装
接触vue已经很长时间,也经常使用axios,但是原生封装的方法都很难满足日程开发的需求,所以这期就写一下axios的封装. 作者:陈宝玉啊转发链接:https://www.jianshu.com/ ...
vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...
Android入门：封装一个HTTP请求的辅助类
前面的文章中,我们曾经实现了一个HTTP的GET 和 POST 请求: 此处我封装了一个HTTP的get和post的辅助类,能够更好的使用: 类名:HttpRequestUtil 提供了如下功能: ( ...
vue+axios中的get请求传参，post请求头（form/json）不一样的传参的处理
<script>需要引入 import axios from 'axios' import Qs from 'qs'(如果只是get请求就不需要引qs) 1.正常get请求: v ...
用vue自己封装一个分页组件
准备知识:全局配置组件(本文不赘述,可自行百度) 先来看下效果. 非常简单的效果.事件上仅改变页码,无其他. 1.新建文件pagination.vue.简单解释下:先写DOM结构和样式,接着是事件. ...

vue + axios---封装一个http请求

vue + axios---封装一个http请求相关推荐

最新文章

热门文章