VUE3-配置axios

在组件中，引入刚才写好的axiosInstance,如下在loginBtn中进行使用，访问后端端口为8022的服务器即可。3.在axios中进行如下操作,引入axios,创建axios实例，并进行暴露，在文件中配置基本路径。2.在src下创建plugins文件夹，和axios相应js文件。1.首先在终端中运行，安装axios插件。注意：baseURL后面的URL要大写。

初级码虫

1422人浏览 · 2022-12-22 22:18:42

初级码虫 · 2022-12-22 22:18:42 发布

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>