VUE3-配置axios

  • Post author:
  • Post category:vue


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>



版权声明:本文为w1015907028原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。