本篇内容主要讲解“Vue3使用axios的配置方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3使用axios的配置方法”吧!
一、安装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, // 异步请求携带cookieheaders: {// 设置后端需要的传参类型'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 返回数据中的 dataconst dataAxios = response.data// 这个状态码是和后端约定的const code = dataAxios.resetreturn 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的配置方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
