ES7 之 async/await 异步函数操作，isomorphic-fetch 请求实战-JavaScript中文网-JavaScript教程资源分享门户

在 web 开发中，异步操作是非常常见的。随着越来越多的数据和业务逻辑在前端展现，更高效的异步操作变得尤为重要。ES7 通过 async/await 关键字，为异步操作提供了更加便捷和可读性高的方式。本文将从 async/await 的使用入手，结合 isomorphic-fetch 请求库进行实战演练，并介绍其中的一些技术细节，以及常见问题的解决方法。

async/await 异步函数操作

async/await 关键字的使用，使得 JavaScript 的异步编程模型得到了大大的简化和优化。async/await 实际上是建立在 Promise 的基础上的，它把异步函数的执行过程转化为 Promise 对象的执行过程，从而更加方便和直观的进行流程控制。

具体的使用方法，如下所示：

async function asyncOperation() {
  let result = await doSomethingAsynchronous();
  return result;
}

上面的代码实现了一个异步操作的封装。其中，异步操作的实现通过 await 关键字直接向 Promise 对象请求获取数据。await 关键字后面的 Promise 对象，也可以是返回 Promise 对象的异步函数。

多个异步操作的串行执行，可以通过 Promise 的 then 方法逐个调用来实现。而 async/await 则可以通过类似同步编程的方式进行操作：

async function asyncOperation() {
  let result1 = await operation1();
  let result2 = await operation2(result1);
  let result3 = await operation3(result2);
  return result3;
}

上面的代码通过 async/await 关键字，让三个异步操作依次执行，并交换返回结果。这样，在具有复杂流程的异步操作中，代码的可读性将大大提高。

另外，需要注意的是，使用 async 关键字修饰的函数，将自动返回一个 Promise 对象。这个 Promise 对象将在异步操作结束后，得到 resolve 或 reject 处理结果。

isomorphic-fetch 请求库

isomorphic-fetch 请求库是一个基于 Promise 的标准请求库，它支持在浏览器和服务器之间，提供统一的、简洁且可靠的请求操作。在本文中，我们将使用 isomorphic-fetch 请求库，进行 async/await 异步函数操作的实战演示。

安装 isomorphic-fetch

isomorphic-fetch 请求库，可以通过 npm 包管理器直接进行安装：

npm install --save isomorphic-fetch es6-promise

其中，es6-promise 是 Promise 的 polyfill，用来支持一些旧版本的浏览器。

发送请求

isomorphic-fetch 提供的 fetch 方法，可以方便地进行请求操作。fetch 可以接受一个 URL 参数，用来指定请求的地址，其返回值则是一个 Promise 对象，它将在异步请求结束后，得到 resolve 或 reject 处理结果。

下面是一个简单的 get 请求示例：

// javascriptcn.com 代码示例
async function sendGetRequest(url) {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });
  return await response.json();
}

上面的代码，使用了 async/await 异步函数操作，并通过 fetch 方法发送了一个 get 请求，请求的地址是 url 参数指定的地址。fetch 方法的第二个参数，用来指定请求的方法和请求头；response.json() 方法，则是提供了将响应结果转化为 json 格式的便捷方法。

类似的，也可以通过以下方式发送 post 请求：

// javascriptcn.com 代码示例
async function sendPostRequest(url, data) {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  return await response.json();
}

上面的代码，使用了 async/await 异步函数操作，并通过 fetch 方法发送了一个 post 请求，请求的地址是 url 参数指定的地址，请求的数据则是 data 参数指定的数据。fetch 方法的第二个参数，不仅用来指定请求的方法和请求头，也可以用来指定请求数据的格式。

错误处理

在异步请求中，我们需要注意错误处理。isomorphic-fetch 请求库提供了一个 ok 属性，用来判断请求是否成功，并返回相应的错误信息。

// javascriptcn.com 代码示例
async function sendGetRequest(url) {
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });
  if (!response.ok) {
    throw new Error(response.status);
  }
  return await response.json();
}

上面的代码，在判断请求成功后，如果出现错误，则抛出一个错误实例对象并提供错误状态码。

实战演示

在本节中，我们将通过一个真实的示例来演示 async/await 与 isomorphic-fetch 请求库的使用，以及相关的技术细节和问题解决方法。

我们需要实现一个简单的全局参数配置管理平台，该平台需要完成以下基本要求：

支持通过接口获取当前参数配置列表
支持通过接口修改当前参数配置
支持通过接口添加新的参数配置

下面是具体的实现代码：

// javascriptcn.com 代码示例
import fetch from 'isomorphic-fetch';

const BASE_URL = 'http://localhost:3000';

async function sendGetRequest(url) {
  const response = await fetch(`${BASE_URL}/${url}`, {
    method: 'GET',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    }
  });
  if (!response.ok) {
    throw new Error(response.status);
  }
  return await response.json();
}

async function sendPostRequest(url, data) {
  const response = await fetch(`${BASE_URL}/${url}`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  if (!response.ok) {
    throw new Error(response.status);
  }
  return await response.json();
}

async function sendPutRequest(url, data) {
  const response = await fetch(`${BASE_URL}/${url}`, {
    method: 'PUT',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  if (!response.ok) {
    throw new Error(response.status);
  }
  return await response.json();
}

async function getParameterConfigurations() {
  return await sendGetRequest('configs');
}

async function updateParameterConfiguration(configId, data) {
  return await sendPutRequest(`configs/${configId}`, data);
}

async function addParameterConfiguration(data) {
  return await sendPostRequest('configs', data);
}

上面的代码实现了基于 async/await 和 isomorphic-fetch 请求库的全局参数配置管理平台。其中，包含了三个请求方法和上述已经介绍过的 get/post 请求演示。

最后，使用这些请求方法，我们就能够轻松实现一个参数配置管理应用程序：

// javascriptcn.com 代码示例
async function app() {
  const configs = await getParameterConfigurations();
  console.log(configs);
  const newConfig = await addParameterConfiguration({
    name: 'test',
    value: '123'
  });
  console.log(newConfig);
  const updatedConfig = await updateParameterConfiguration(newConfig.id, {
    name: 'test',
    value: '456'
  });
  console.log(updatedConfig);
}

app();

总结

通过本文的阅读，我们了解了 async/await 异步函数操作，以及如何使用 isomorphic-fetch 请求库进行实战演练。我们掌握了异步请求的技术细节和常见问题的解决方法。异步操作的简化和可读性的提高，可以让我们更好地处理特定的场景，提高了我们的代码效率和开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a273c7d4982a6ebc82252