微信扫一扫 分享朋友圈

已有 993 人浏览分享

开启左侧

Vue3使用axios的配置方法

[复制链接]
993 0
一、安装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>
原文链接:https://blog.csdn.net/xjtarzan/article/details/123682618

免责声明:
1,海欣资源网所发布的资源由网友上传和分享,不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
2,海欣资源网的资源来源于网友分享,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
3,海欣资源网所发布的资源由网友上传和分享,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
4,如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉,联系方式邮箱 haixinst@qq.com
海欣资源-企业信息化分享平台。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

0

关注

0

粉丝

37

主题
热度排行
回复排行
最新贴子

Archiver|手机版|海欣资源 ( 湘ICP备2021008090号-1 )|网站地图

GMT+8, 2024-10-12 01:22 , Gzip On, MemCached On.

免责声明:本站所发布的资源和文章均来自网络,仅限用于学习交流和测试研究目的,不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢,请支持正版,购买正版,得到更好的正版服务,如有侵权,请联系我们删除并予以真诚的道歉。