详解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-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue 给数组添加新对象并赋值
Apr 20 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流量统计功能的实现代码
2012/09/29 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php中session使用示例
2014/03/29 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
发现的以前不知道的函数
2006/09/19 Javascript
JavaScript 组件之旅(一)分析和设计
2009/10/28 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
python处理csv数据的方法
2015/03/11 Python
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python二分查找详解
2015/09/13 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
高三生物教学反思
2014/01/25 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
三好生演讲稿
2014/09/12 职场文书
作风建设整改方案
2014/10/27 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
生产车间管理制度
2015/08/04 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书