使用 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 */ }
推荐阅读
-
使用 async 和 await,实现 fetch 同步请求
-
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
-
vue 中使用 async/await 将 axios 异步请求同步化处理
-
微信小程序 ———— 异步请求中使用async/await实现同步请求
-
微信小程序中使用Async-await方法异步请求变为同步请求方法
-
微信小程序中使用Async-await方法异步请求变为同步请求方法
-
vue如何使用async、await实现同步请求
-
js实现两个方式实现函数同步执行,比如先执行完B函数,再执行A函数。callback和async await
-
vue在多方法执行完后再执行另一个方法(等待请求完数据再执行)async/await使用方法和Promise.all
-
vue如何使用async、await实现同步请求