前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript学习笔记029-fetch0公共接口调用

JavaScript学习笔记029-fetch0公共接口调用

作者头像
Mr. 柳上原
发布2018-12-11 17:03:17
5520
发布2018-12-11 17:03:17
举报
文章被收录于专栏:菜鸟前端工程师

Author:Mr.柳上原

  • 付出不亚于任何的努力
  • 愿我们所有的努力,都不会被生活辜负
  • 不忘初心,方得始终

好久没更新笔记了

成功找到前端工作

前期异常忙碌

不过,

成长也是异常的快速

了解了很多在培训中不会提及到的各种企业开发知识

比如

团队协调开发需要使用的各种工具

架构

后端接口的使用何调试

各种前端框架的企业规范

........

虽然每天加班

但是

依然觉得很快乐

感谢潭州

感谢我现在的天使公司

感谢所有人

代码语言:javascript
复制
<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<script>
/*
get  post
请求都不安全

get方式:
数据在url地址里
post方式:
Request Payload里可以查询到发送的数据信息

传输数据量大小:
get 数据量为url地址的字节量长度限制值(4k)
post 没有数据量限制
*/
// 停止当前的http请求
xhr.abort();

/*
fetch:
用来解决XMLHttpRequest的配置和调用方法混乱,异步事件不友好的问题
返回的是promise对象
*/
// fetch的使用
let urls = "http://www.xxx.cn";
// 传统的XHR发送json请求方法
const xhr = new XMLHttpRequest();
xhr.open("GET", urls);
xhr.responseType = "json";
xhr.onload = function (){
console.log(xhr.response);
}
xhr.onerror = function (){
cosole.log("Oops, error");
}
xhr.send();
// fetch发送json请求方法
fetch(urls, {
// 类似jq的ajax方法
method: "",
....
})
.then(response => {response.json()})
.then(data => {console.log(data)})
.catch(e => {console.log("Oops, error", e)})
// 使用async / await做优化后的XHR发送json请求方法
async function fn(){
try{
let response = await fetch(urls);
let data = await response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
}

// fetch实例
<input>
<input>
<button id="btn">
// get
btn.onclick = () => {
let str = `?user=${user.value}&pwd=${pwd.value}`
fetch("http://localhost:3001")
.then(res => res.json())
.then(data => {
console.log(data);
})
}
// post
btn.onclick = () => {
const data = {
user: user.value,
pwd: pwd.value
}
fetch("http://localhost:3001", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application-json"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(result => {
console.log(result);
})
}
// async / await
btn.onclick = () => {
const data = {
user: user.value,
pwd: pwd.value
};
(async (data) => {
const res = await fetch("http://localhost:3001", {
method: "post",
headers: {
"Accept": "application/json",
"Content-Type": "application-json"
},
body: JSON.stringify(data)
});
const result = await res.json();
console.log(result);
})(data)
}

// 公共接口
// www.showapi
// 可以使用公共接口做ajax测试

</script>

</body>

</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.11.10 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档