亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

1.xhr與fetch異步編程的步驟,實(shí)例演示

1.1 同步與異步/進(jìn)程與線程

（一）同步與異步

1. 同步: 順序執(zhí)行, 優(yōu)點(diǎn): 靜態(tài)預(yù)判結(jié)果可控, 缺點(diǎn): 耗時(shí)任務(wù)阻塞執(zhí)行
2. 異步: 亂序執(zhí)行, 優(yōu)點(diǎn): 不會(huì)阻塞代碼,體驗(yàn)好, 缺點(diǎn): 順序不可控

以銀行排隊(duì)辦業(yè)務(wù)為例

1. 同步: 默認(rèn)排隊(duì)叫號(hào), 依次辦理
2. 異步: 耗時(shí)任務(wù)(如修改密碼忘帶shen份證)則離開(kāi)隊(duì)列, 后面任務(wù)繼續(xù)
3. 任務(wù)隊(duì)列: 取了shen份證回來(lái)了, 就待在”任務(wù)隊(duì)列”中等待再次叫號(hào)

哪些是異步任務(wù)(耗時(shí))?

1. 定時(shí)任務(wù): setTimeout, setInterval
2. 事件監(jiān)聽(tīng): addEventListener
3. 網(wǎng)絡(luò)請(qǐng)求: ajax, promise,fetch
4. 文件讀寫(xiě)等涉及IO的操作

(二) 進(jìn)程與線程

1. 進(jìn)程: 程序的運(yùn)行狀態(tài), 執(zhí)行實(shí)例
2. 一個(gè)cpu同一時(shí)刻只能執(zhí)行一個(gè)進(jìn)程,通過(guò)上下文切換實(shí)現(xiàn)多任務(wù),除非多核
3. 線程: 進(jìn)程中的某個(gè)任務(wù),即一個(gè)進(jìn)程,可以由多個(gè)線程完成
4. js的特征,決定了它只能是單線程,例如dom操作中, 增刪元素就不可能同時(shí)進(jìn)行
5. 單線程可確保js按用戶要求的順序執(zhí)行,并確定業(yè)務(wù)邏輯正確,結(jié)果可控
6. 但是單線程,也決定了所有任務(wù)必須在一個(gè)執(zhí)行棧中完成,導(dǎo)致耗時(shí)任務(wù)必然會(huì)阻塞整個(gè)線程
7. 解決文案: 任務(wù)隊(duì)列與事件循環(huán)(事件輪詢)
   通信解釋:http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

(三) 單線程,任務(wù)隊(duì)列,事件循環(huán)之間的關(guān)系與協(xié)同

1. js所有任務(wù)都在主線程中”同步”執(zhí)行
2. 異步任務(wù)以回調(diào)的形式聲明,并離開(kāi)主線程,交給多線程的瀏覽器去執(zhí)行
3. 異步任務(wù)執(zhí)行完畢,進(jìn)入到”任務(wù)隊(duì)列”中排隊(duì)等待進(jìn)入主線程執(zhí)行
4. 主線程同步任務(wù)全部完成后, 通過(guò)”事件循環(huán)”查詢”任務(wù)隊(duì)列”中是否有等待的任務(wù)
5. 如果有,則該就緒任務(wù)進(jìn)入主線程同步執(zhí)行
6. 該任務(wù)完成后, 事件循環(huán)會(huì)再次取出下一個(gè)就緒的異步任務(wù)進(jìn)入主線程
7. 以上過(guò)程不斷重復(fù), 直到主線程中的同步任務(wù), 任務(wù)隊(duì)列中的異步任務(wù)全部執(zhí)行完畢

此圖異步執(zhí)行原理有誤，個(gè)人理解

1.2 傳統(tǒng)異步 xhr

1. 創(chuàng)建對(duì)象: new XMLHttpRequest();
2. 響應(yīng)類(lèi)型: xhr.responseType = "json";
3. 配置參數(shù): xhr.open("GET", url, true);
4. 請(qǐng)求回調(diào): xhr.onload = () => console.log(xhr.response);
5. 失敗回調(diào): xhr.onerror = () => console.log("Error");
6. 發(fā)起請(qǐng)求: xhr.send(null);
   xhr 至少監(jiān)聽(tīng)2個(gè)事件: load,error, 調(diào)用2個(gè)函數(shù): open,send
post請(qǐng)求,需要設(shè)置一下請(qǐng)求頭與請(qǐng)求的數(shù)據(jù),其它與get請(qǐng)求完全相同

<button onclick="getUser1(this)">查詢用戶信息: XHR</button>
<script>
    function getUser1(btn) {
    //1. 創(chuàng)建對(duì)象
    const xhr = new XMLHttpRequest();
    //2. 響應(yīng)類(lèi)型
    xhr.responseType = "json";
    //3. 配置參數(shù)
    // 不傳get參數(shù),默認(rèn)返回全部用戶, 用table顯示
    let url = "http://website.io/users.php";
    // 如果有g(shù)et參數(shù),用戶id,用ul列表顯示
    // url = "http://website.io/users.php?id=1";
    xhr.open("GET", url);
    //4. 請(qǐng)求回調(diào)
    xhr.onload = () => {
        console.log(xhr.response);
        // 將數(shù)組渲染到頁(yè)面中
        render(xhr.response, btn);
    };
    //5. 失敗回調(diào)
    xhr.onerror = () => console.log("Error");
    //6. 發(fā)起請(qǐng)求
    xhr.send(null);
    }
</script>
<script src="../js/function.js"></script>

1.3 fetch異步編程

語(yǔ)法：fetch(url).them(getRes).them(handleRes).catch(err)
url 請(qǐng)求響應(yīng)地址
getRes 回調(diào)函數(shù) 返回json response.json()
handleRes 回調(diào)函數(shù) 得到JSON并處理
err 處理異步執(zhí)行的錯(cuò)誤信息

fetch api 瀏覽器原生實(shí)現(xiàn)的異步技術(shù)
axios基于 xhr / fetch
fetch基于Promise, 返回 Promise對(duì)象

window.addEventListener("load", ()=>{
let url = "https://jsonplaceholder.typicode.com/users";
fetch(url)
    .then((response) => response.json())
    .then((json) => {
    // 打印到控制臺(tái)
    console.log(json);
    });
},false)

fetch異步編程語(yǔ)法糖
async與 await

    // async：聲明此函數(shù)是異步任務(wù)
    window.addEventListener(
    "load",
    async () => {
        let url = "https://jsonplaceholder.typicode.com/users";
        // 異步耗時(shí)操作,需要等待結(jié)果才可進(jìn)入下一步
        const response = await fetch(url);
        // 獲取到結(jié)果之后,再轉(zhuǎn)為json
        const result = await response.json();
        console.log(result);
    },
    false
    );

2.模塊成員導(dǎo)出與導(dǎo)入,別名使用場(chǎng)景與命名空間演示

模板導(dǎo)出

// 1.逐個(gè)導(dǎo)出
export let userName = "張三";
export let sex = "male";
// 2.統(tǒng)一導(dǎo)出
// (1)聲明
let hello = "hello";
function getHello(hello, userName) {
  return `${hello}:${userName}`;
}
// (2)導(dǎo)出： 對(duì)象字面量 {...}
export { hello, getHello };
// 3.別名導(dǎo)出
let prodName = "華為手機(jī)";
let price = 5000;
function prdoPrice(prodName, price) {
  return `手機(jī)：${prodName} , 價(jià)格：${price}`;
}
export { prodName as n, price as p, prdoPrice as fn };
// 4.默認(rèn)導(dǎo)出 只導(dǎo)出一個(gè)值 一個(gè)模塊,只能有一個(gè)默認(rèn)導(dǎo)出
export default class {
  constructor(userName) {
    this.userName = userName;
  }
  getUserName() {
    return `Hello ${this.username}`;
  }
}
// 5.混合導(dǎo)出 默認(rèn)成員和非默認(rèn)成員
// (1) 默認(rèn)成員 第四點(diǎn)已導(dǎo)出
// (2) 非默認(rèn)成員
let email = "1331440618@qq.com";
// 私有成員, 不對(duì)外 不導(dǎo)出
let userSex = "male";
export { email };
// 可以將郵箱 email 做為默認(rèn)導(dǎo)出 , 起一個(gè)特殊的別名 default
// export {email as default};

模板導(dǎo)入

<!-- 默認(rèn)script在瀏覽器環(huán)境下不支持模塊,需要指定類(lèi)型type="module" -->
<script type="module">
    //  1.逐個(gè)（統(tǒng)一）導(dǎo)出 統(tǒng)一導(dǎo)入
    import { userName, sex, hello, getHello } from "./modules/m1.js";
    console.log(" 1.逐個(gè)（統(tǒng)一）導(dǎo)出 統(tǒng)一導(dǎo)入");
    console.log(`**userName: ${userName} , sex: ${sex} ** 
    ${getHello(hello, userName)}`);
    console.log(" ====================== ");
    //  2.別名導(dǎo)出 統(tǒng)一導(dǎo)入
    import { n, p, fn } from "./modules/m1.js";
    console.log(" 2.別名導(dǎo)出 統(tǒng)一導(dǎo)入: ");
    console.log(fn(n, p));
    console.log(" ====================== ");
    //  3.別名導(dǎo)出 別名導(dǎo)入
    import { n as prodName, p as price, fn as prodPrice } from "./modules/m1.js";
    console.log(" 3.別名導(dǎo)出 別名導(dǎo)入: ");
    console.log(prodPrice(prodName, price));
    console.log(" ====================== ");
    //  4.默認(rèn)導(dǎo)出 在導(dǎo)入時(shí)重命名
    import getName from "./modules/m1.js";
    console.log(" 4.默認(rèn)導(dǎo)出 在導(dǎo)入時(shí)重命名：");
    const getUserName = new getName("張三, 李四, 王二, 麻子");
    console.log(getUserName);
    console.log(" ====================== ");
    //  5.混合導(dǎo)入 默認(rèn)導(dǎo)出重命名在前 后面跟上模板字面量
    import Name, { email } from "./modules/m1.js";
    console.log(" 5.混合導(dǎo)入 默認(rèn)導(dǎo)出重命名在前：");
    console.log(new Name("張三, 李四"));
    console.log(email);
    console.log(" ====================== ");
    // 6.命名空間導(dǎo)入 把所有模塊封裝在命名空間中 用屬性“.”的方式來(lái)使用
    import * as info from "./modules/m1.js";
    console.log(" 6.命名空間導(dǎo)入 ");
    console.log(info.userName);
    console.log(new info.default("李四， 張三"));
</script>

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：異步執(zhí)行那塊確實(shí)有點(diǎn)問(wèn)題