vue项目接口管理,所有接口都在apis文件夹中统一管理

最新推荐文章于 2024-10-10 21:17:28 发布

weixin_30505485

最新推荐文章于 2024-10-10 21:17:28 发布

阅读量5.1k

点赞数 2

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/yingyigongzi/p/10863477.html

版权

本文介绍了如何在Vue项目中使用axios和async/await实现接口的统一管理，以提高代码规范性和维护性。通过在src/apis文件夹下定义接口，可以实现接口的集中管理，方便修改和复用。具体步骤包括创建apis文件夹，配置http.js，按模块创建接口文件，以及在组件中调用接口。

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

参考：https://www.codercto.com/a/53432.html

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

方法可能不只一种，本文使用axios+async/await进行接口的统一管理

本文使用vue-cli生成的项目举例

使用接口管理之前

在项目的某个具体组件中调接口，把调用接口的方法直接写在mounted中，或在是methods中比如：

xxx.vue

<template>
    <div id="areaTree">
      <!-- 标题 -->
      <div class="leftTree_Title">
        <el-row>        
          <el-col :span="24">{
   {msg}}</el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
import axios from 'axios'

export default { 
    name: "test",
    data:function(){ 
        return{ 
            msg:'站点选择',
        }
    },
    methods:{ 
    },
    computed:{
    },
    //--------------Vue生命周期---具体细节参考：https://www.cnblogs.com/yingyigongzi/p/10844175.html  --------