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.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>