# 网络请求

* ajax
* WebSocket
* @microsoft/fetch-event-source （SSE）

## API请求

请注意`src/components/ApiGet.vue`组件，此组件可用于`get`相关的网络请求。

此组件封装了一些默认的`loading`效果、错误处理内容提示。

相关使用示例：

* src/components/ApiGetExample1.vue
* src/components/ApiGetExample2.vue
* src/components/ApiGetExample3.vue

### 示例1

```vue
<template>
  <ApiGet :url="url">
    <template v-slot="slotProps">
      <div class="result">{{ slotProps.data[0].id }}</div>
    </template>
  </ApiGet>
</template>

<script setup>
import ApiGet from './ApiGet.vue';

/**
 * 使用默认的Loading、错误处理组件
 * 使用 slot 数据
 */
const url = '/api/agent/list';
</script>
```
一般常用的`API`接口请求通过`Promise`统一封装暴露,在组件中引入调用。
### 示例2
```js
export const getAgentIcons = ({ username }) => {
  return new Promise((resolve, reject) => {
    ajax
      .post(
        `/iaserverapi/v1/user/getInfo`,
        { username },
        {
          headers: {
            'Content-Type': 'application/json'
          }
        }
      )
      .then((res) => {
        resolve({ code: 200, data: res.data });
      })
      .catch((err) => {
        reject(err);
      });
  });
}

```
```js
import { getAgentIcons } from '../../modules/conversation-dialog/api-dialog';
const getAgentIconsFun = async () => {
  const username = await getUserName();
  const res = await getAgentIcons({ username });
};

```