使用 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 同步请求关于 async 和 await 的介绍https://javascript.info/async-await (英文版)https://segmentfault.com/a/1190000013292562?utm_source=channel-newest (中文翻译版)在了解了 async 和 await 之后,我们就可...
在前后端分离项目中,前端请求后端接口得到后端数据,完成页面内容的渲染或功能状态的判断,已经成为常规操作。那么,关于前端如何请求后端接口获取并解析数据,主要有哪些方式呢:
1. 刷新页面:最直接但是最体验最差的一种方式
2. form表单:会触发页面跳转,无法实现页内重复请求
3. ifream:比较消耗性能,且控制成本过高
4. Ajax - 使用XMLHttpRequest对象进行异步请求,极大的提高了用户体验,实现了页内请求
5. Fetch - Ajax的替代者,浏览器内置方法,封装了Pro
				
本人在找fetch同步请求,发现大部分博客都是营销狗的牛头不对马嘴一直在水的贴,只有极少部分可以参考(讲的不是很详细);本人参考的博客:https://www.cnblogs.com/liquanjiang/p/11409792.html //顺便把这种302的视频流切片重定向的给转出来 var hls=['https://jx.bigmao.top:81/jump/caalArWJIdvL3srp-rj6AZlB8s-IyYwP0r3U9kBLya1Z-NGxrqTdAvDDimaVgfyr%3..
fetch请求 文章目录fetch请求参数与ajax的不同点:fetch之处理超时请求xhr设置请求超时fetch设置请求超时关于eventLoop references: 异步请求Fetch setTimeout的延迟时间,是从什么时间段开始算起的? 关于async/await、promise和setTimeout...
async/await ES2017引入了async函数,使异步操作变得更加方便。 1、async函数返回的Promise对象会运行执行(resolve)异步函数的返回结果,或者如果异步函数抛出异常的话会运行拒绝(reject)。 2、async会把返回值传递给Promise.resolve( )。 async function testAsync(){ return "hello async"; console.log(testAsync()); Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。 在浏览器,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。通过XHRHttpRequest对象及时监听完成事件,执行事件回调函数不会堵塞程序运行。 关于Fetch Fetch...
目录了解fetch没有fetch时我们获取异步资源的方式:使用fetch后我们获取异步资源的方式fetch的语法fetch的Response对象1.同步属性2.判断请求是否成功发出3.操作标头4.读取Response对象内容的方法5.创建副本(clone)6.底层接口定制HTTP请求取消fetch请求 了解fetch - Fetch API 提供了一个获取资源的接口(包括跨域请求),用于取代传统的XMLHttpRequest的,在 JavaScript 脚本里面发出 HTTP 请求。 - 目前还没有被所有