前端请求数据GET方法

后端提供的接口文档，前端根据后端提供的文档类型开发，需要关注的点一般有：传参，请求数据的方法，前端在使用GET请求的时候一般是为了查询数据等操作，这时会把参数放在地址栏后面一起传过去，请求头如果对token等没有特殊要求的情况下一般是不用设置的

• GET请求参数以‘？’分割，以‘key1=value1&k2=value2’的形式带在URL后面
• GET请求对所发信息量的限制是2000个字符
• GET请求的参数只能是ASCII码，所以中文需要URL编码
• GET请求用于提交非敏感数据和小数据

后端接口为：

/abc/system/queryDataList

方法为：get

前端在src/utils或者src/api下创建request.js

1.首先引入axios的依赖

2.axios.create方法创建实例

3.export抛出实例对象

import axios from 'axios'

const request = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default request

src/utils或者src/api/list下创建dataList.js作为使用的接口文件

import request from '@/api/request'
// 获取新增数据列表
//传参时用直接在URL后面加参数 ?id=${id}
export function queryDataList (curId) {
  return request({
    url: `/abc/system/queryDataList?curId=${id}`,
    method: 'get'
  })
}

在要使用的.vue中使用（使用vue3），ant design vue

<template #content>
  <a-list :grid="{ gutter: 9, column: 2 }" :data-source="systemData">
    <template #renderItem="{ item }">
      <a-list-item>
        <a-card-grid>
          <img :src="item.icon" alt="" style="width: 25px; height: 25px" />
          <div>
            {{ item.name }}
          </div>
        </a-card-grid>
      </a-list-item>
    </template>
  </a-list>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { querySysList } from '@/api/list/dataList.js'
const dataList = ref([]);
export default defineComponent({
  setup() {
    onMounted(() => {
      querySysList(id).then((res) => {
      dataList.value = res.data.data
      })
    });
    return {
      dataList,
    };
  },
});
</script>