欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2023-12-21 23:48:58
...

使用 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 */ }

上一篇:

下一篇: