写一个前端数据请求的封装

以下是一个前端数据请求的示例封装：

function request(url, options) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(options.method || 'get', url);
    xhr.onload = () => {
      const response = {
        data: xhr.responseText,
        status: xhr.status,
        statusText: xhr.statusText,
        headers: xhr.getAllResponseHeaders()
      };
      resolve(response);
    };
    xhr.onerror = () => {
      reject(new TypeError('请求出错'));
    };
    xhr.withCredentials = options.withCredentials || false;
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.send(options.body);
  });
}

这是一个使用 `XMLHttpRequest` 封装的请求函数。它可以发送带有配置选项的 AJAX 请求，并返回一个 Promise 对象。函数接受两个参数，第一个参数是请求的 URL，第二个参数是配置选项。

配置选项可以包括以下参数：

- `method`：请求的 HTTP 方法，默认为 `get`。
- `body`：请求体的内容，默认为 `null`。
- `withCredentials`：是否携带跨域请求的凭证，默认为 `false`。

此外，函数还设置了请求头为 `application/json;charset=utf-8`，可以根据需要自行更改。

使用该函数发送请求的示例代码如下：

request('/api/data', {
  method: 'post',
  body: JSON.stringify({ foo: 'bar' })
}).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});

在这个示例中，我们发送了一个 POST 请求，请求体的内容为 `{ "foo": "bar" }`。请求成功后，将响应数据打印到控制台；如果请求出错，则打印错误信息。