封装fetch请求

发表于 | 分类于

封装 fetch 请求

  • 如果只是简单的请求，没必要引入 aixos，通过将fetch请求的相关代码封装在request.js/request.ts文件中，在使用的时候引入相关请求方法即可，好处有几点：
    • 请求的地方代码更少。
    • 公共的错误统一在一个地方添加即可。
    • 请求定制的错误还是请求自己也可以处理。
    • 扩展性好，添加功能只需要改一个地方。
  • 下面给出我在项目中封装的 request.ts 文件具体内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// path：src/utils/request.ts
const request = (url: string, config: any) => {
  return fetch(url, config)
    .then((res: any) => {
      if (!res.ok) {
        // 服务器异常返回
        throw Error('接口请求异常');
      }
      return res.json();
    })
    .catch((error: any) => {
      return Promise.reject(error);
    });
};

// GET请求
export const get = (url: string) => {
  return request(url, { method: 'GET' });
};

// POST请求
export const post = (url: string, data: any) => {
  return request(url, {
    body: JSON.stringify(data),
    headers: {
      'content-type': 'application/json',
    },
    method: 'POST',
  });
};
  • 根据功能建立不同的请求模块，如列表模块：
1
2
3
4
5
6
7
8
9
10
11
12
13
// path：src/services/api/list.ts

import * as Fetch from '../../utils/request';

export async function getListData () {
  return Fetch.get('URL1');
}

export async function getListItemDetail (id: number) {
  return Fetch.get(
    `URL2/${id}`,
  ); 
}
  • 暴露 api：
1
2
3
// path：src/services/api.ts

export * from './api/list';
  • 组件中使用：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// path：src/components/xxx.tsx

import React from 'react';
import * as api from '../../services/api';

class HomePage extends React.Component<any> {
  /* 省略代码 */ 

  async loadListData () {
    try {
      const res = await api.getListData();
      this.setState({
        listData: res.data.list,
      });
    } catch (error) {
      // do something
    }
  }
  
  /* 省略代码 */ 
}

export default HomePage;
  • 以上则成功完成 fetch 请求的封装。