详解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中computed和watch有哪些区别
Dec 19 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
python的exec、eval使用分析
2017/12/11 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python如何实现异步调用函数执行
2019/07/08 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
计算机开发个人求职信范文
2013/09/26 职场文书
个人求职简历的自我评价范文
2013/10/09 职场文书
我未来的职业规划范文
2014/01/11 职场文书
优秀企业获奖感言
2014/02/01 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
欢迎标语大全
2014/06/21 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang