详解Vue3使用axios的配置教程


Posted in Vue.js onApril 29, 2022

axios中文网站:axios-http.com/zh/

一、安装axios

npm install axios --save

二、配置axios,添加拦截器

在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:

import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
	baseURL: '/api', // 所有的请求地址前缀部分
	timeout: 60000, // 请求超时时间毫秒
	withCredentials: true, // 异步请求携带cookie
	headers: {
		// 设置后端需要的传参类型
		'Content-Type': 'application/json',
		'token': 'your token',
		'X-Requested-With': 'XMLHttpRequest',
	},
})

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

// 添加响应拦截器
service.interceptors.response.use(
	function (response) {
		console.log(response)
		// 2xx 范围内的状态码都会触发该函数。
		// 对响应数据做点什么
		// dataAxios 是 axios 返回数据中的 data
		const dataAxios = response.data
		// 这个状态码是和后端约定的
		const code = dataAxios.reset
		return dataAxios
	},
	function (error) {
		// 超出 2xx 范围的状态码都会触发该函数。
		// 对响应错误做点什么
		console.log(error)
		return Promise.reject(error)
	}
)
export default service

三、使用axios发送请求

在src目录下新建一个apis文件夹,这里面放入今后所有的请求文件,例如新建一个请求用户信息的接口user.ts,代码如下:

// 导入axios实例
import httpRequest from '@/request/index'

// 定义接口的传参
interface UserInfoParam {
	userID: string,
	userName: string
}

// 获取用户信息
export function apiGetUserInfo(param: UserInfoParam) {
    return httpRequest({
		url: 'your api url',
		method: 'post',
		data: param,
	})
}

接着在具体业务页面里使用这个请求,例如:

<script setup lang="ts">
import { onMounted } from 'vue'
import { apiGetUserInfo } from '@/apis/user'
function getUserInfo() {
	const param = {
		userID: '10001',
		userName: 'Mike',
	}
	apiGetUserInfo(param).then((res) => {
		console.log(res)
	})
}
onMounted(() => {
	getUserInfo()
})
</script>

附:Vue3 中全局引入 axios

main.js中

import axios from 'axios'
const app = createApp(App) // 将默认改写为这样
app.provide('$axios', axios)

组件内使用axios(compositionAPI)

<script setup>
    import { inject } from 'vue'
    const $axios = inject('$axios')
    $axios.get('https://api.github.com/users').then((resp) => {    
      console.log(resp.data)
    }).catch((err) => {
      console.log(err)
    })
</script>

总结

到此这篇关于Vue3使用axios的配置的文章就介绍到这了!


Tags in this post...

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
详解Vue router路由
Nov 20 Vue.js
关于Vue中的options选项
Mar 22 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 #Vue.js
vue里使用create, mounted调用方法
vue elementUI批量上传文件
Apr 26 #Vue.js
vue.js 使用原生js实现轮播图
Apr 26 #Vue.js
如何vue使用el-table遍历循环表头和表体数据
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
You might like
实用函数3
2007/11/08 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript基本类型详解
2014/11/28 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
JS中递归函数
2016/06/17 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python求出0~100以内的所有素数
2018/01/23 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
使用canvas压缩图片大小的方法示例
2019/08/02 HTML / CSS
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
建筑安全责任书范本
2014/07/24 职场文书
门面房租房协议书
2014/08/20 职场文书
五五普法心得体会
2014/09/04 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
管辖权异议上诉状
2015/05/23 职场文书
Python关于OS文件目录处理的实例分享
2021/05/23 Python
java基础——多线程
2021/07/03 Java/Android