Fetch API介绍及简单的使用

2023-06-01 00:00:00 fetch 简单介绍

现代浏览器对ES6语法的支持趋于完善，用Promise对象处理异步请求被越来越多的开发者应用。

为了更好地处理异步请求，作为对现有的XMLHttpRequest方法的替代，

JavaScript引入了fetch方法，基于Promise处理异步请求。

更多关于fetch的介绍，可以参考MDN关于fetch的介绍。

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

简单的一个fetch 使用demo

测试控制器（我这是在go语言中的beego框架里面一个用户列表）

//使用原生sql进行列表数据查询

func (c *UserController) InfoList() {
o := orm.NewOrm()
var maps []orm.Params
sql := `select * from users`
o.Raw(sql).Values(&maps)
c.Data["json"] = maps
c.ServeJSON()
}

测试返回数据

fetch测试数据.png

视图 (中间代码我就去掉了)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
</head>
<body>
....
<script>
fetch('http://127.0.0.1:8080/infolist')
    .then(res => res.json())
    .then(json => console.log(json))
</script>  
</body>
</html>

fetch返回数据.png

这是一个最简单的fetch,fetch默认使用的是GET方法;

请注意，这里我们调用了then方法2次，在第一个then中，我们得到了一个Response对象，

我们调用它的.json()方法，

来获取服务器响应中的数据，需要注意的是，res.json()返回的是一个Promise对象，而不是JSON化的数据

在这里,res.json()返回了一个Promise对象，

在这个Promise对象的then方法中我们可以访问到被解析成JSON格式的数据，

这时候我们才可以使用这些数据，因此要一个Promise链，总共调用两次then方法。

async/await语法的写法（效果跟上面一样）

(async () => {
    const res = await fetch('http://127.0.0.1:8080/infolist');
    const json = await res.json();
    console.log(json);
})();

如果你想了解async/await相关的知识：

https://es6.ruanyifeng.com/?search=fetch&x=0&y=0#docs/async

相关文章