提取变量重构pycharm_将提取重构为异步/等待

提取变量重构pycharm

Async/await is one of the most revolutionary features that has been added to JavaScript in the past few years. It offers an intuitive replacement to the syntactical mess that promises sometimes tend to be.

Async/await是过去几年中已添加到JavaScript中的最具革命性的功能之一。 它提供了对语法混乱的一种直观的替代，而这种混乱有时可能会发生。

There is nothing wrong with the good old Fetch API, which is made available by default to make ajax requests and more.

良好的旧Fetch API没什么问题，默认情况下该API可用于发出Ajax请求等。

“The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.” — MDN web docs

“ Fetch API提供了一个JavaScript接口，用于访问和处理HTTP管道的各个部分，例如请求和响应。 它还提供了全局fetch()方法，该方法提供了一种简单，逻辑的方式来跨网络异步获取资源。” — MDN网站文档

A basic fetch request is really simple to set up. Take a look at the following code:

基本的fetch请求真的很容易设置。 看下面的代码：

异步/等待101 (Async/Await 101)

Async/await is a relatively new (part of the so-called ECMAScript 2017 JavaScript edition) way to write asynchronous code. Previous alternatives for asynchronous code were callbacks and promises. Async/await is actually just syntactic sugar built on top of promises, and it makes asynchronous code look and behave a little more like synchronous code. Some argue it makes spotting asynchronous code more difficult and might require some getting used to.

Async/await是一种相对较新的(称为ECMAScript 2017 JavaScript版本的一部分)编写异步代码的方式。 异步代码的先前替代方法是回调和Promise。 异步/等待实际上只是建立在promise之上的语法糖，它使异步代码的外观和行为更像同步代码。 有人认为，这使得发现异步代码更加困难，并且可能需要一些习惯。

It is important to note that theawait keyword cannot be used outside the async function.

这是需要注意的重要的await关键字不能在外部使用async功能。

接受异步/等待的原因 (Reasons to embrace async/await)

• It makes code concise and clean.
  它使代码简洁明了。
• It allows us to avoid nesting our code.
  它使我们避免嵌套代码。

• It makes it possible to handle both synchronous and asynchronous errors with try/catch.

  使用try/catch可以处理同步和异步错误。

• It’s much easier to debug (I’m sure I don’t have to tell you to try to figure out where to drop a debugger inside a fetch function).

  调试起来要容易得多(我确定我不必告诉您尝试找出将调试器放在fetch函数中的位置)。

通过三个简单的步骤即可将抓取转换为异步/等待 (Transform a fetch into async/await in three easy steps)

Here is the function we will be transforming for this example:

这是我们将为该示例转换的函数：

Identify the asynchronous function and put async before it:

识别异步函数并将async放在它前面：

async function fetchAlbums() {
...
}

Identify all the different promises in the function and add await in front of each of these promises. Assign them to variables:

识别函数中所有不同的promise，并在每个promise中添加await 。 将它们分配给变量：

const res = await fetch(apiUrl)
const json = await res.json()

Refactor the rest to make it look synchronous:

重构其余部分以使其看起来同步：

async function fetchAlbums() {
    const response =  await fetch(apiUrl)
    const json = await response.json()
    console.log(json)
}

Using async/await is not reserved for functions using the function keyword. We can also use it as an arrow function, although the syntax is slightly different:

对于使用function关键字的function不保留使用async/await 。 我们也可以将其用作箭头函数，尽管语法略有不同：

const fetchAlbums = async () => {
    const response = await fetch(apiUrl)
    const json = response.json()
    console.log(json)
}

It can also be an anonymous function, as in the following example where our asynchronous function is one of the arguments passed on to our passport.use function in our Google auth configuration. Here, it is used with fetch:

它也可以是匿名函数，如下面的示例所示，其中异步函数是传递给我们的passport.use的参数之一。 在我们的Google身份验证配置中起作用。 在这里，它与fetch ：

After refactoring with async/await:

用async/await重构后：

翻译自: https://medium.com/better-programming/promises-with-async-await-605645a6c0e8

提取变量重构pycharm