让 Umi.js request更全面：解决请求返回数据不完整问题

2023-09-01 06:39:23

在我们使用 Umi.js 进行前端开发时，经常需要发送 HTTP 请求以获取数据。Umi.js 提供了 request 工具，可以轻松发送请求并处理响应。但是，在某些情况下，我们需要使用 response.blob() 方法来处理响应数据，但发现通过 request.then((resp) => {}) 返回的 resp 并不是完整的 response 对象。这可能是因为 umi-request 对 axios 的封装进行了优化，导致某些属性丢失。

为了解决这个问题，我们需要对 umi-request 进行适当的封装，以确保请求返回完整的数据。具体步骤如下：

安装 axios 库
```
npm install axios
```
创建一个新的 JavaScript 文件，例如 request.js。

在该文件中，引入 axios 库并封装一个新的 request 函数。

import axios from 'axios';

const request = (config) => {
  return axios(config)
    .then((response) => {
      // 返回完整的 response 对象
      return response;
    })
    .catch((error) => {
      // 处理错误
      return Promise.reject(error);
    });
};

export default request;

在您的组件中，导入封装后的 request 函数，并使用它来发送请求。

import request from './request';

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    request({
      url: 'https://example.com/api/data',
    })
      .then((response) => {
        setData(response.data);
      })
      .catch((error) => {
        // 处理错误
      });
  }, []);

  return <div>{data}</div>;
};

export default Component;