利用Promise自定义一个GET请求的函数示例代码

下面是利用 Promise 自定义一个 GET 请求的函数示例代码的完整攻略。

1. 准备工作

在开始编写代码之前，需要先了解一下使用 Promise 实现异步请求的基本步骤：

1. 创建一个 Promise 对象，并返回它
2. 在 Promise 对象中执行异步操作，并根据操作结果调用 resolve 或 reject 方法
3. 调用 Promise 对象的 then 方法，处理异步操作成功的情况
4. 调用 Promise 对象的 catch 方法，处理异步操作失败的情况

2. 编写自定义的 GET 请求函数

接下来，我们可以开始编写自定义的 GET 请求函数。代码如下：

function get(url) {
  return new Promise(function(resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = function() {
      if (xhr.status == 200) {
        resolve(xhr.response);
      }
      else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = function() {
      reject(Error('Network Error'));
    };
    xhr.send();
  });
}

上述代码中，我们定义了一个名为 get 的函数，它接受一个参数 url，表示要请求的地址。在函数中，我们创建了一个 Promise 对象，并在 Promise 对象的回调函数中执行实际的异步请求操作。具体来说，我们使用 XMLHttpRequest 对象发出一个 GET 请求，并根据请求的结果调用 resolve 或 reject 方法，以达到异步处理的目的。

需要注意的是，在 get 函数中，我们使用了 Error 对象来表示请求失败的情况，并在 onerror 回调函数中处理了网络错误的情况。另外，由于 XMLHttpRequest 的 response 属性返回的是字符串类型，我们需要在成功的情况下将其转换为 JSON 格式，以方便后续的使用。

3. 使用自定义的 GET 请求函数

使用自定义的 GET 请求函数其实也非常简单。我们只需要调用 get 函数，并传入要请求的地址，然后在 then 方法中处理请求成功的情况即可。代码示例如下：

get('https://api.github.com/users')
  .then(function(response) {
    var users = JSON.parse(response);
    console.log('GitHub users:', users);
  })
  .catch(function(error) {
    console.error(error);
  });

在上述代码中，我们调用了 get 函数，请求了 GitHub 用户列表的数据。在请求成功的情况下，我们使用 JSON.parse 方法将请求返回的字符串类型的响应体解析为 JSON 格式，并将其输出到控制台中。在请求失败的情况下，我们输出了捕获到的错误信息。

4. 示例说明

上面的示例代码演示了如何通过自定义 GET 请求函数实现异步请求，并将请求后的数据用 JSON 格式解析并输出到控制台。在实际项目中，我们可以根据自己的需要修改这个函数，以适应各种场景下的异步请求操作。

下面再给出一些使用自定义 GET 请求函数的示例：

4.1 请求静态资源

get('/path/to/static/resource.jpg')
  .then(function(response) {
    console.log('Resource content:', response);
  })
  .catch(function(error) {
    console.error(error);
  });

以上代码演示了如何请求某个静态资源，并输出其内容。

4.2 请求服务器接口

get('https://api.example.com/products')
  .then(function(response) {
    var products = JSON.parse(response);
    console.log('Products:', products);
  })
  .catch(function(error) {
    console.error(error);
  });

以上代码演示了如何请求某个服务器接口，并将返回的数据用 JSON 格式解析并输出到控制台中。

这些示例可以帮助读者更好地理解自定义 GET 请求函数的使用方法。当然，实际项目中的需求各不相同，读者需要根据自己的具体情况进行适当的调整。