详解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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
Vue如何实现组件间通信
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
vue实现在data里引入相对路径
Jun 05 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
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP curl 或 file_get_contents 获取需要授权页面的方法
2017/05/05 PHP
PHP与以太坊交互详解
2018/08/24 PHP
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
小程序实现密码输入框
2020/11/16 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
使用Python函数进行模块化的实现
2019/11/15 Python
用python解压分析jar包实例
2020/01/16 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
物理系毕业生自荐书范文
2014/02/22 职场文书
文化宣传方案
2014/03/13 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
作风年建设汇报材料
2014/08/14 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
个人股份合作协议书
2014/10/24 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang