详解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+Element实现增删改查的示例源码
Nov 23 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
详解Vue的options
May 15 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
vue实现input输入模糊查询的三种方式
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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP基础学习小结
2011/04/17 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
php读取本地json文件的实例
2018/03/07 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
详谈js模块化规范
2017/07/07 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python3音乐播放器简单实现代码
2020/04/20 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python初学者常见错误详解
2019/07/02 Python
Django中Middleware中的函数详解
2019/07/18 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
python输入中文的实例方法
2020/09/14 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
仓库班组长岗位职责
2013/12/12 职场文书
保护环境建议书300字
2014/05/13 职场文书
安全负责人任命书
2014/06/06 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python