JavaScript学习笔记029-fetch0公共接口调用
标签：
JavaScript
Author：Mr.柳上原
付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终
好久没更新笔记了
成功找到前端工作
前期异常忙碌
不过，
成长也是异常的快速
了解了很多在培训中不会提及到的各种企业开发知识
比如
团队协调开发需要使用的各种工具
架构
后端接口的使用和调试
各种前端框架的企业规范
........
虽然每天加班
但是
依然觉得很快乐
感谢潭州
感谢我现在的天使公司
感谢所有人
<!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. = function (){
console.log(xhr.response);
}
xhr. = 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">// getbtn. = () => {
let str = `?user=${user.value}&pwd=${pwd.value}`
fetch("http://localhost:3001")
.then(res => res.json())
.then(data => {
console.log(data);
})
}// postbtn. = () => {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 / awaitbtn. = () => {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>
作者：Mr柳上原
链接：https://www.jianshu.com/p/5d42c48e88b6
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦