前端初始化页面，后端接口会被多次调用

Question

vue项目前端通过created（）初始化展示数据时，后端接口会被调用五次是为什么

```vue
<template>
  <div>
      <el-main style="padding-left: 0px;padding-top: 0px">
        <div>
          <el-table
            :data="typesList"
            v-loading="tableLoading"
            :row-key="(row)=>{ return row.id}"
            border
            stripe
            size="mini"

            style="width:700px;height: 230px">
            <el-table-column
              type="selection"
              :reserve-selection="true"
              align="left"
              width="50px">
            </el-table-column>

            <el-table-column
              prop="id"
              align="left"
              label="ID"
              width="200px">
            </el-table-column>
            <el-table-column
              prop="name"
              width="300px"
              align="left"
              label="名称">
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="125px">
              <template slot-scope="scope">

                <el-button type="warning" style="padding: 3px 4px 3px 4px;margin: 2px"
                           @click="updateView(scope.row)"     size="mini">修改
                </el-button>

                <el-button type="danger" style="padding: 3px 4px 3px 4px;margin: 2px" size="mini"
                           @click="deleteEmp(scope.row)" >删除
                </el-button>
              </template>

            </el-table-column>
          </el-table>


          <div style="display: flex;justify-content: space-between;margin: 2px">
            <!--分页-->
            <el-pagination
              background
              :page-size="5"
              :current-page="currentPage"
              @current-change="currentChange"
              layout="prev, pager, next"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </el-main>

  </div>
</template>

<script>
    export default {
      name: "OrdersList",
      data() {
        return {
          typesList: [],
        }
      },
      created() {
        this.getTypes();
      },
      methods: {
        //获取所有信息
        getTypes() {
          this.getRequest("types/typesList?pageIndex=" + this.currentPage + "&pageSize=5").then(resp => {
            if (resp.data.code === 10000) {
              this.typesList = resp.data.typesList;
              this.totalCount = resp.data.count;
              // console.log("数量给asdada："+resp.data.typesList.length)
            }
          })
        },
      }
    }
    </script>


```vue
//get查 
let base = 'http://localhost:8989/';
export const postRequest = (url, params) => {
  console.log("路径为："+`${base}${url}`)

  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  });
}

Answer 1

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7668205
• 这篇博客你也可以参考下：怎么用vue设置保护页面？（需要对应权限才可访问）
• 除此之外, 这篇博客: 前端面试问题整理中的 vue脚手架初始化都做了些什么 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  

   

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^