详解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 插槽简介及使用示例
Nov 19 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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语法(1)
2006/10/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Python中集合类型(set)学习小结
2015/01/28 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
python取代netcat过程分析
2018/02/10 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
浅析python 字典嵌套
2020/09/29 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
C语言编程题
2015/03/09 面试题
护士求职信
2014/07/05 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
幼儿教师辞职信
2015/02/27 职场文书
疾病证明书
2015/06/19 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js