使用 async 和 await，实现 fetch 同步请求

使用 async 和 await，实现 fetch 同步请求

关于 async 和 await 的介绍

https://javascript.info/async-await （英文版）

https://segmentfault.com/a/1190000013292562?utm_source=channel-newest （中文翻译版）

在了解了 async 和 await 之后，我们就可以开始编码了

那么首先你需要新建一个 node 项目

npm init fetch-test

接着我们要安装 node-fetch

npm install node-fetch -save

目前最新版的 node-fetch 是 2.1.2，直接通过 require(‘node-fetch’) 的方式引入是无法使用的，我们还需要 babel 为我们的项目"编译"，接下来我们就简单配置下 babel

那么首先，我们先安装 badel 以及需要使用到的插件

npm install babel-cli babel-core babel-loader babel-plugin-transform-runtime babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-register --save-dev

接着编写一个配置文件 .badel

{
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        [
            "transform-runtime",
            {
                "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
            }
        ]
    ]
}

在新建一个入口文件 index.js ，方便每次运行自动加载

require("babel-register");

在 package.json 中配置运行脚本

"scripts": {
    "start": "node index.js"
}

至此，有关 babel 的配置就算是结束了。but，我们还什么都没有做，那么下面我们就开始编写程序的主体代码

首先新建一个文件夹 src ，在 src 目录下新建 如下两个文件

resource.js

import fetch from 'node-fetch';

async function getAll(){
    const res = await fetch('http://localhost:21021/api/services/app/Target/GetAll');
    const result = await res.json();

    return result;
}

module.exports = getAll;

main.js

const resource = require('./resource');

const result = await resource.getAll();
console.log("请求结果：", result);

修改 index.js ，增加 main.js 的引用

require("babel-register");
require("./src/main");

最后运行

npm start

就能看到结果了

请求结果： { /* data */ }