VUE3-配置axios

最新推荐文章于 2024-07-27 17:17:02 发布

初级码虫

最新推荐文章于 2024-07-27 17:17:02 发布

阅读量1.4k

点赞数

分类专栏： JAVAWEB 文章标签：前端 javascript html5 vue.js

本文链接：https://blog.csdn.net/w1015907028/article/details/128414288

版权

JAVAWEB 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档介绍了在Vue.js项目中如何安装和配置Axios插件，以及如何创建axios实例用于API请求。首先在终端通过命令行安装axios，然后在src目录下创建plugins文件夹和axios相关JS文件。接着，设置axios的基本URL和超时时间，并导出实例。最后，在组件中引入axiosInstance，通过它发起GET请求到服务器进行登录操作。

摘要由CSDN通过智能技术生成

1.首先在终端中运行，安装axios插件

2.在src下创建plugins文件夹，和axios相应js文件

3.在axios中进行如下操作,引入axios,创建axios实例，并进行暴露，在文件中配置基本路径

注意：baseURL后面的URL要大写

import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: 'http://127.0.0.1:8022',
    timeout:5000
})
export default axiosInstance

4.使用：

在组件中，引入刚才写好的axiosInstance,如下在loginBtn中进行使用，访问后端端口为8022的服务器即可。

<script>
import {reactive,toRefs} from 'vue'; 
import axiosInstance from '../plugins/axiosInstance';
 
    export default {
        name:'Login',
        setup(){
            var loginUser = reactive({
                userName:'',
                password:'',
                checkCode:''
            });

            function loginBtn(){
                axiosInstance({
                    url:'/user/login',
                    method:'get'
                }).then((respose)=>{
                    console.log(respose);
                });
            }

            return {
                ...toRefs(loginUser),
                loginBtn
            }
        }
    }
</script>