Vue3使用axios的配置方法

本篇内容主要讲解"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, // 异步请求携带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,        })}

接着在具体业务页面里使用这个请求，例如：

附：Vue3 中全局引入 axios

main.js中

import axios from 'axios'const app = createApp(App) // 将默认改写为这样app.provide('$axios', axios)

组件内使用axios（compositionAPI）

到此，相信大家对"Vue3使用axios的配置方法"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！