详解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设计一个日历表
Dec 03 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue3.0中使用element的完整步骤
Mar 04 Vue.js
vue引入Excel表格插件的方法
Apr 28 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue实现简易音乐播放器
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
人族 Terran 基本策略
2020/03/14 星际争霸
Access数据库导入Mysql的方法之一
2006/10/09 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
JavaScript下利用fso判断文件是否存在的代码
2010/12/11 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
Python open读写文件实现脚本
2008/09/06 Python
Python制作Windows系统服务
2017/03/25 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python脚本实现验证码识别
2018/06/07 Python
python 实现屏幕录制示例
2019/12/23 Python
sklearn+python:线性回归案例
2020/02/24 Python
Python如何获取文件指定行的内容
2020/05/27 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
《花木兰》教学反思
2014/04/09 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
Golang 结构体数据集合
2022/04/22 Golang
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技