vue3+vite+element-plus API接口请求

前两篇文章已经将《vue3+vite+element-plus》的一些基础的初始化项目的步聚分享了，希望能给大家有所帮助！感谢小伙伴们的阅读、关注、点赞、转发。

那今天我们就来讲API接口请求引用。

首先在 src 目录中创建一个 api 的文件夹，以备用于存放API接口地址。

接下来在 api 文件夹中，创建一个login.js 这个是登录时所需接口的文件

import axios from '@/static/js/axios';
import {ElMessage} from 'element-plus';

export default {
	loginApi : (params) => {
  	return axios.post('/api/login',params)
    .then(res=> {
    	let { code, msg, data } = res;
      //这里code,msg,data的值是根据后端接口返回值来定义及判断
      if( code !=1 ){
      	return ElMessage.error(msg);
      }else{
      	return data
      }
    })
  }
}

接下来是如何使用这个封装好的 loginApi 接口方法

在 views 目录中创建 Login/Login.vue 文件

<template>
    <div>
        <el-button @click="submitLogin">登录</el-button>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs } from 'vue'
    import api from '@/api/login'
		export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();

            //初始化数据
            const state = reactive({
                
            })
            
            //提交登录
            const submitLogin = () => {
            	api.loginApi({username: 'admin',password: '123456'})
                .then(res=> {
                    console.log(res)
                })
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
   
</style>