柚子快報(bào)邀請(qǐng)碼778899分享：前端 Ajax學(xué)習(xí)

http://yzkb.51969.com/

AJXS學(xué)習(xí)

一.初識(shí)AJXS

1.瀏覽器和服務(wù)器

瀏覽器訪問的資源存放在服務(wù)器上。

瀏覽器負(fù)責(zé)瀏覽資源，服務(wù)器負(fù)責(zé)提供資源

2.url網(wǎng)址

url網(wǎng)址的作用：標(biāo)記某個(gè)資源，在網(wǎng)絡(luò)中的唯一地址，只有通過url地址，才能定位資源的存放位置，從而成功訪問到對(duì)應(yīng)的資源。

url網(wǎng)址組成： http(協(xié)議)?/www.itcast.cn(主機(jī)名):80(端口號(hào))/2018/images/logo.png(資源存放的路徑)

協(xié)議：協(xié)議就是瀏覽器和服務(wù)器之間傳輸數(shù)據(jù)的規(guī)則，保證都能讀懂對(duì)方發(fā)來的內(nèi)容

主機(jī)名：標(biāo)識(shí)服務(wù)器在互聯(lián)網(wǎng)中的唯一地址，確保能夠訪問到他

端口解釋： 1.端口號(hào)有效范圍在0-65535之間的整數(shù) 2.標(biāo)識(shí)服務(wù)器里不同服務(wù) 3.瀏覽器默認(rèn)訪問的都是80端口

路徑：確定在服務(wù)器上具體位置

3.請(qǐng)求和響應(yīng)

請(qǐng)求：瀏覽器通過網(wǎng)絡(luò)去服務(wù)器要資源的過程 響應(yīng)：服務(wù)器通過瀏覽器返回資源的過程

4.Ajax講解

概念：Ajax是一種在js代碼中發(fā)起一次請(qǐng)求并獲取相應(yīng)數(shù)據(jù)的技術(shù)

使用場景： 1.比如驗(yàn)證手機(jī)號(hào)是否在服務(wù)器已經(jīng)注冊(cè)過了； 2.根據(jù)輸入關(guān)鍵字聯(lián)想菜單提示數(shù)據(jù)切換； 3.根據(jù)增和刪除，修改頁面數(shù)據(jù)； 4.以上效果數(shù)據(jù)都在服務(wù)器上，所以瀏覽器刷新數(shù)據(jù)也還在

5.Ajax基礎(chǔ)使用

Ajax是瀏覽器向服務(wù)器請(qǐng)求數(shù)據(jù)的一種技術(shù) axios是庫，對(duì)這個(gè)技術(shù)具體代碼的實(shí)現(xiàn)

axios的使用： 1.先引入axios.js文件到自己的網(wǎng)頁中

文件連接：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

2.明確axios的使用語法：

axios({

url:'請(qǐng)求的URL地址',

method:'請(qǐng)求的方法'

}).then((result)=>{

//.then用來指定請(qǐng)求成功之后的回調(diào)函數(shù)

//形參中的result是請(qǐng)求成功之后的結(jié)果

})

3.請(qǐng)求的url地址，就是標(biāo)記資源的url網(wǎng)址

4.請(qǐng)求的方法，標(biāo)記本次請(qǐng)求的動(dòng)作不同(主要瀏覽器端要求什么，我們就寫什么，有5種固定名字的值)

POST:向服務(wù)器新增數(shù)據(jù)

GET:從服務(wù)器獲取數(shù)據(jù)

DELETE:刪除服務(wù)器上的數(shù)據(jù)

PUT:更新服務(wù)器上的數(shù)據(jù)(側(cè)重于完整更新：例如更新用戶的完整信息)

PATCH:更新服務(wù)器上的數(shù)據(jù)(側(cè)重于部分更新：例如只更新用戶的手機(jī)號(hào))

5.根據(jù)服務(wù)器的數(shù)據(jù)url網(wǎng)址的文檔說明，我們編寫代碼請(qǐng)求一次數(shù)據(jù)

6.運(yùn)行后結(jié)果，在控制臺(tái)可以看到，請(qǐng)求并接受到此url網(wǎng)址返回的響應(yīng)結(jié)果

例子：

6.Ajax傳參使用

axios({

url:'http://ajax-base-api-t.itheima.net/api/getbooks',

method:'GET'，

params:{//攜帶查詢參數(shù)

//參數(shù)名：值

id=1,

bookname:'西游記'

}

}).then((result)=>{

console.log(result)

})

//查詢的參數(shù)名要和服務(wù)器端對(duì)應(yīng)上，會(huì)有文檔使用

傳遞的查詢參數(shù)值要真實(shí)有效，才會(huì)返回對(duì)應(yīng)的結(jié)果

7.url編碼

url地址中，不允許出現(xiàn)中文和空格等特殊符號(hào)，所以自動(dòng)轉(zhuǎn)換成url編碼 格式：%xx%xx%xx

js內(nèi)置了2個(gè)方法，可以對(duì)字符串進(jìn)行url編碼和url解碼

//window對(duì)象內(nèi)置的方法encodeURI和decodeURI

//中文->url編碼

let str="西游記"

let urlStr=encodeURI(str)

console.log(urlStr);

//url編碼->中文

let zhStr=decodeURI(urlStr)

console.log(zhStr)

8.POST方法

GET和POST本質(zhì)上都是http請(qǐng)求，區(qū)別只是被貼上了不同的請(qǐng)求方式，后端會(huì)根據(jù)不同的方式執(zhí)行不同的代碼操作，所以在url?攜帶參數(shù)還是請(qǐng)求體里攜帶參數(shù)，要和后端代碼對(duì)上即可使用

不建議在GET上攜帶數(shù)據(jù)發(fā)給后端，因?yàn)闉g覽器對(duì)GET方式傳參url長度有限制

axios({

url: 'http://ajax-base-api-t.itheima.net/api/addbook',

method: 'POST',

//params:參數(shù)值對(duì)應(yīng)(query查詢參數(shù))

//data:請(qǐng)求體參數(shù)(body請(qǐng)求體)

data: {

bookname: '大學(xué)英語必修1',

author: 'aaa',

publisher: 'xx出版社'

}

}).then((result) => {

console.log(result)

})

9.請(qǐng)求報(bào)文

一次完整的傳輸過程，是一次請(qǐng)求對(duì)應(yīng)一次響應(yīng)，在傳輸?shù)倪^程中，數(shù)據(jù)包就是報(bào)文

請(qǐng)求報(bào)文：規(guī)定了瀏覽器向服務(wù)器，以什么格式把數(shù)據(jù)發(fā)送 響應(yīng)報(bào)文：規(guī)定了服務(wù)器向?yàn)g覽器，以什么格式把數(shù)據(jù)返回

請(qǐng)求報(bào)文組成： 1.請(qǐng)求行： 請(qǐng)求方式：(GET/POST/DELETE/PUT/PATCH) 請(qǐng)求url：資源在服務(wù)器地址 協(xié)議版本：默認(rèn)HTTP/1.1

2.請(qǐng)求頭部：頭部參數(shù)名：值

3.請(qǐng)求體：攜帶給服務(wù)器的數(shù)據(jù)

10.響應(yīng)報(bào)文

響應(yīng)報(bào)文組成： 1.響應(yīng)行： 協(xié)議版本：默認(rèn)HTTP/1.1 響應(yīng)狀態(tài)碼：服務(wù)器返回的一個(gè)文字標(biāo)識(shí)，代表本次響應(yīng)的描述 響應(yīng)狀態(tài)描述：服務(wù)器返回的一個(gè)文字標(biāo)識(shí)，代表本次響應(yīng)的描述

2.響應(yīng)頭部：頭部參數(shù)名：值

3.響應(yīng)體：服務(wù)器返回的響應(yīng)數(shù)據(jù)

11.響應(yīng)碼

1.常見的響應(yīng)狀態(tài)碼

1XX 響應(yīng)中–臨時(shí)狀態(tài)碼，表示請(qǐng)求已經(jīng)接受，告訴客戶端應(yīng)該繼續(xù)請(qǐng)求或者如果它已經(jīng)完成則忽略它 2XX 成功–表示請(qǐng)求已經(jīng)被成功接受，處理已完成 3XX 重定向–重定向到其他地方（讓客戶端再發(fā)起一個(gè)請(qǐng)求以完成整個(gè)處理） 4XX 客戶端錯(cuò)誤–處理發(fā)生錯(cuò)誤，責(zé)任在客戶端，如：客戶端的請(qǐng)求一個(gè)不存在的資源，客戶端未被授權(quán)，禁止訪問等 5XX 服務(wù)器端錯(cuò)誤–處理發(fā)生錯(cuò)誤，責(zé)任在服務(wù)器端，如：服務(wù)端拋出異常，路由出錯(cuò)，HTTP版本不支持等

200：OK 請(qǐng)求成功 201：Created 資源在服務(wù)器端已成功創(chuàng)建 302：Moved Temporarily 資源臨時(shí)性重定向，響應(yīng)體中不包含任何資源內(nèi)容 304：Not Modified 資源在客戶端被緩存(一般是css，js，圖片文件) 400：Bad Request 客戶端的請(qǐng)求方式、或請(qǐng)求參數(shù)有誤導(dǎo)致的請(qǐng)求失敗 401：Unauthorized 客戶端的用戶身份認(rèn)證未通過，導(dǎo)致的此次請(qǐng)求失敗 404：Not Found 客戶端請(qǐng)求的資源地址錯(cuò)誤，導(dǎo)致服務(wù)器無法找到資源 500：Internal Server Error 服務(wù)器內(nèi)部錯(cuò)誤，導(dǎo)致的本次請(qǐng)求失敗

12.接口相關(guān)

1.接口：其實(shí)就是提供服務(wù)器的url網(wǎng)址，我們前面想要數(shù)據(jù)/提交數(shù)據(jù)，需要知道服務(wù)器在互聯(lián)網(wǎng)中的唯一url地址 2.而服務(wù)器會(huì)把一些接口地址羅列整理到一個(gè)文檔上 3.接口文檔：就是接口使用說明書 4.接口文檔格式：包含如下內(nèi)容 接口名稱：接口的名稱，用來快速區(qū)分每個(gè)接口的作用。如：登錄接口、添加圖書接口 接口URL：客戶端發(fā)起Ajax調(diào)用此接口時(shí)，請(qǐng)求的URL地址 請(qǐng)求方式：接口的請(qǐng)求方式，如：GET、POST、PUT、DELETE等 請(qǐng)求參數(shù)：請(qǐng)求此接口時(shí)，需要發(fā)送到服務(wù)器的查詢參數(shù)或請(qǐng)求體 返回示例：當(dāng)接口請(qǐng)求成功后，服務(wù)器響應(yīng)回來的數(shù)據(jù)的基本格式 返回參數(shù)說明：接口響應(yīng)結(jié)果的詳細(xì)描述

13.邏輯碼

位置：相應(yīng)報(bào)文-響應(yīng)體數(shù)據(jù)中 這次業(yè)務(wù)邏輯是否完全成功 每個(gè)數(shù)字不固定，需要和后臺(tái)約定

二.表單和文件上傳

1.表單

1.表單是網(wǎng)頁里的form標(biāo)簽以及一些輸入框和下拉菜單等等，用于手機(jī)用戶輸入的信息

2.表單的組成： 表單標(biāo)簽 表單域 表單按鈕

3.表單標(biāo)簽指的是from標(biāo)簽

4.表單域：常見的有input、textarea、select等 每個(gè)表單域必須包含name屬性

5.表單按鈕 type的默認(rèn)值就是submit

2.表單_自我提交

表單的代碼

2.form標(biāo)簽的兩個(gè)屬性，可以設(shè)置提交到的地址和請(qǐng)求的方法 action:接口的url地址，把表單采集到的數(shù)據(jù)，提交到哪個(gè)接口中 method：GET或POST，數(shù)據(jù)的提交方式(默認(rèn)值為GET)

3.請(qǐng)求的地址和方式如下：

接口地址:http://ajax-api.itheima.net/api/data

請(qǐng)求方式:POST

總結(jié)： 1.form表單提交是自身特性，和Ajax沒有關(guān)系 2.form表單提交，會(huì)讓瀏覽器跳轉(zhuǎn)到action指定的地址并提交數(shù)據(jù)，體驗(yàn)非常不好 3.Ajax+axios的提交常用，不會(huì)刷新當(dāng)前頁面并進(jìn)行一次請(qǐng)求提交

3.表單_Ajax提交

4.表單_整體獲取

一個(gè)一個(gè)標(biāo)簽獲取，多的話會(huì)很麻煩，解決方案：使用form-serialize.js插件

引入js地址，然后此庫的使用語法如下：

serialize(form表單的DOM對(duì)象)//返回值：name參數(shù)名=值&name參數(shù)名=值，例如：‘username=admin&password=123456’

serialize(form表單的DOM對(duì)象,{hash:true})//返回值：{name參數(shù)名:值,name參數(shù)名:值},例如：{username:'admin',password:'123456'}

5.文件上傳

點(diǎn)擊上傳文件

6.請(qǐng)求體類型

1.application/x-www-form-urlencoded(key=value&key=value的字符串) 表單中不包含文件上傳的場景，適用于普通數(shù)據(jù)的提交

2.multipart/form-data 表單中包含上傳文件的場景

3.application/json 上傳json格式數(shù)據(jù)

三.XHR和Promise

1.Ajax原生學(xué)習(xí)

axios.js是一個(gè)庫，內(nèi)部是原生js代碼，實(shí)際它是對(duì)原生的代碼進(jìn)行了封裝。 Ajax如果用原生js實(shí)現(xiàn)，需要使用window提供的一個(gè)構(gòu)造函數(shù)，叫XMLHttpRequest 使用語法如下：

//1.創(chuàng)建一個(gè)xhr對(duì)象

let xhr = new XMLHttpRequest()

//2.設(shè)置請(qǐng)求方式和請(qǐng)求地址 xhr.open("請(qǐng)求方式","請(qǐng)求地址")

xhr.open('GET', 'http://ajax-api.itheima.net/api/province')

//3.發(fā)送請(qǐng)求

xhr.send()

//4.監(jiān)聽load(請(qǐng)求成功)事件==>可以獲取響應(yīng)數(shù)據(jù)

xhr.addEventListener('load', function () {

console.log(xhr.response)//響應(yīng)體數(shù)據(jù)

//知識(shí)點(diǎn)：把JSON格式字符串==>轉(zhuǎn)成JS數(shù)據(jù)類型

//語法：JSON.parse(JSON字符串)

//返回值：JS數(shù)據(jù)類型

let result = JSON.parse(xhr.response)

console.log(result);

})

2.Ajax原生傳參

//1.創(chuàng)建一個(gè)xhr對(duì)象

let xhr = new XMLHttpRequest()

//2.設(shè)置請(qǐng)求方式和請(qǐng)求地址 xhr.open("請(qǐng)求方式","請(qǐng)求地址")

xhr.open('GET', 'http://ajax-api.itheima.net/api/city?pname=遼寧省')

//3.發(fā)送請(qǐng)求

xhr.send()

//4.監(jiān)聽load(請(qǐng)求成功)事件==>可以獲取響應(yīng)數(shù)據(jù)

xhr.addEventListener('load', function () {

console.log(xhr.response)//響應(yīng)體數(shù)據(jù)

let result = JSON.parse(xhr.response)

console.log(result);

})

3.JSON

1.JSON是一種數(shù)據(jù)交換格式，它本質(zhì)上是用字符串的方式來表示對(duì)象或數(shù)組類

2.用字符串的方式來表示的對(duì)象或數(shù)組類型的數(shù)據(jù)，叫做JSON數(shù)據(jù) 對(duì)象格式JSON字符串 key必須用雙引號(hào)包起來

'{"userName":"小馬","age":16,"sex":"男"}'

數(shù)組格式JSON字符串

'["小馬",16,"男"]'

3.相互轉(zhuǎn)換

4.同步異步

同步：在原地需要有結(jié)果，才能繼續(xù)向下 異步：交給瀏覽器去執(zhí)行，不必在原地等待結(jié)果，主線程會(huì)先繼續(xù)往下執(zhí)行其他代碼

異步：定時(shí)器，Ajax請(qǐng)求，事件綁定

5.回調(diào)函數(shù)

異步一般需要耗時(shí)，且不會(huì)阻塞主線進(jìn)程代碼往下執(zhí)行 在JS中，只有用函數(shù)調(diào)用的方式，才能讓某一段代碼去執(zhí)行 所以異步代碼都有一個(gè)函數(shù)體，這個(gè)函數(shù)體里面代碼都是等待這個(gè)異步任務(wù)有結(jié)果后執(zhí)行 把一個(gè)函數(shù)當(dāng)作實(shí)參傳遞進(jìn)去，將來特定的時(shí)機(jī)，在調(diào)用的這個(gè)函數(shù)內(nèi)，回調(diào)我們傳入的函數(shù)調(diào)用，這個(gè)動(dòng)作就叫回調(diào)函數(shù)

function theFn(fn){

fn()//代碼執(zhí)行到這句話，會(huì)回調(diào)theFn()里函數(shù)體執(zhí)行，這個(gè)過程叫回調(diào)函數(shù)

}

theFn((=>{//此箭頭函數(shù)作為實(shí)參值傳遞給了theFn的形參變量fn上

console.log('回調(diào)函數(shù)執(zhí)行');

}))

6.回調(diào)地獄

回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，不方便閱讀和修改

舉例

7.Promise語法學(xué)習(xí)

ES6新出的一個(gè)構(gòu)造函數(shù)，為了解決回調(diào)地獄

語法：

let 變量 = new Promise((resolve,reject)=>{

//resolve和reject是Promise提供的兩個(gè)函數(shù)

//寫一些代碼(同步/異步)都可以，你想返回出去結(jié)果

//resolve('成功的結(jié)果')

//reject('失敗的結(jié)果')

})

變量.then(res=>{

//接收此Promise對(duì)象內(nèi)，返回出來的成功結(jié)果

}).catch(err=>{

//接收此Promise對(duì)象內(nèi)，返回出來的失敗結(jié)果

})

運(yùn)行：

1.new Promise后原地留下一個(gè)Promise對(duì)象(承諾)，承諾將來會(huì)有一個(gè)成功/失敗的結(jié)果給你返回使用

2.它會(huì)立即執(zhí)行new Promise()小括號(hào)里所有代碼

8.Promise的三種狀態(tài)

new Promise原地有個(gè)Promise§，狀態(tài)：‘pending’(準(zhǔn)備) 通過打印查看它的標(biāo)記 2.立刻執(zhí)行new Promise()里函數(shù)體所有代碼，并準(zhǔn)備resolve和reject函數(shù) 3.給Promise對(duì)象§，添加.then和.catch函數(shù)，等待結(jié)果 4.Promise對(duì)象內(nèi)，當(dāng)調(diào)用了resolve(),會(huì)把當(dāng)前Promise對(duì)象，狀態(tài)：‘fulfilled’(成功)，內(nèi)部會(huì)回調(diào)then()里面函數(shù)體執(zhí)行 5.Promise對(duì)象內(nèi)，當(dāng)調(diào)用了reject(),會(huì)把當(dāng)前Promise對(duì)象，狀態(tài):‘rejected’(失敗)，內(nèi)部會(huì)回調(diào).then()里面函數(shù)體執(zhí)行

9.鏈?zhǔn)秸{(diào)用

let p = new Promise((resolve, reject) => {

setTimeout(() => {

resolve('成功1')

}, 2000)

})

let p2 = new Promise((resolve, reject) => {

setTimeout(() => {

resolve('成功2')

}, 2000)

})

p.then(res => {

console.log(res);//如果return一個(gè)promise對(duì)象，會(huì)被下一個(gè)then接收

return p2

}).then(res => {

console.log(res)

})

//兩個(gè)promise一起打印

10.解決回調(diào)地獄

function myAjax(url) {

return new Promise((resolve, reject) => {

let xhr = new XMLHttpRequest()

xhr.open('GET', url)

xhr.send()

xhr.addEventListener('load', () => {

resolve(JSON.parse(xhr.response))

})

})

}

let pname=''

//1.拿到省份

let p=myAjax('http://ajax-api.itheima.net/api/province')

p.then(res=>{

pname = res.data[5]

//2.拿到城市

return myAjax('http://ajax-api.itheima.net/api/city?pname=${pname}')

}).then(res=>{

let cname = res.data[9]

return myAjax(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)

}).then(res=>{

console.log(res)

})

11.promise的方法

all方法 語法：

Promise.all()

作用：它把多個(gè)Promise對(duì)象合并成一個(gè)大的Promise對(duì)象

返回值：大的Promise對(duì)象

這個(gè)大的Promise對(duì)象的結(jié)果，還是一個(gè)數(shù)組

Promise.all([小Promise對(duì)象,小Promsie對(duì)象,小Promise對(duì)象])

特點(diǎn)：需要所有小的Promise對(duì)象成功后才會(huì)觸發(fā)大的Promise對(duì)象成功的then

注意：萬一有失敗了，就會(huì)讓大的Promise對(duì)象直接狀態(tài)變成失敗狀態(tài)

race方法 語法：

Promise.all([小Promise對(duì)象,小Promsie對(duì)象,小Promise對(duì)象])

作用：它可以把多個(gè)Promise對(duì)象合并成一個(gè)大的Promise對(duì)象，有一個(gè)小的Promise對(duì)象成功了，這個(gè)大的Promise對(duì)象直接為成功狀態(tài)(其他不看)，大的Promise對(duì)象的結(jié)果，直接是成功的這個(gè)小的Promise對(duì)象的成功結(jié)果

四.ES8和EventLoop

1.async和await

語法：

async function 函數(shù)名(){

const result = await Promise對(duì)象

}

舉例：

//aiait只能在被async修飾的函數(shù)內(nèi)

let p=new Promise((resolve,reject)=>{

setTimeout(() => {

resolve('成功的值')

}, 2000);

})

async function myFn(){

const result = await p

console.log(result)

}

myFn()

const youFn= async()=>{

const result=await p

console.log(result)

}

youFn()

注意事項(xiàng)： 1.await必須用在被async修飾的函數(shù)內(nèi) 2.async修飾后，此函數(shù)會(huì)被作為異步函數(shù)，在此函數(shù)中，遇到await會(huì)暫停代碼往下，但不影響外面繼續(xù)執(zhí)行同步流程 3.await后面一般用Promise對(duì)象，但是也可以跟其他類型的數(shù)據(jù)。如果后面跟其他類型數(shù)據(jù)，把此值作為await提取成功的結(jié)果在原地直接使用；如果跟Promise對(duì)象，需要等待Promise對(duì)象內(nèi)，resolve返回成功的結(jié)果，被await提取在原地使用 4.await不能獲取到Promise對(duì)象內(nèi)失敗的結(jié)果，需要借助try+catch代碼塊來捕獲

2.解決回調(diào)地獄

const getListFn = async () => {

const res = await myAjax('http://ajax-api.itheima.net/api/province')

const pname = res.data[5]

const res2 = await myAjax('http://ajax-api.itheima.net/api/city?pname=${pname}')

const cname=res.data[9]

const res3= myAjax(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)

console.log(res3)

}

3.EventLoop事件循環(huán)

js是單線程執(zhí)行的腳本語言，同一時(shí)間只能做一件事 單線程執(zhí)行任務(wù)隊(duì)列，如果有一個(gè)耗時(shí)任務(wù)，后續(xù)會(huì)一直等待。防止這個(gè)問題，異步代碼由js委托給宿主環(huán)境(node環(huán)境，瀏覽器)等執(zhí)行

幾個(gè)概念： 1.JS引擎(c++的代碼)，嵌入在瀏覽器軟件內(nèi) 作用：閱讀+解析+執(zhí)行，我們編寫的js代碼并運(yùn)算結(jié)果 宿主：瀏覽器

2.js引擎里執(zhí)行棧 (1)先從上到下逐行執(zhí)行代碼，遇到同步代碼，等待結(jié)果并使用 (2)遇到異步代碼，則交給宿主環(huán)境，主線程繼續(xù)執(zhí)行下一句 (3)宿主環(huán)境(異步任務(wù))有了結(jié)果，會(huì)“先”把“回調(diào)函數(shù)”裝入任務(wù)隊(duì)列中排隊(duì) (4)執(zhí)行?？臻e，會(huì)把任務(wù)隊(duì)列里回調(diào)函數(shù)推入執(zhí)行棧執(zhí)行

3.事件循環(huán) 當(dāng)執(zhí)行?？臻e，調(diào)度任務(wù)隊(duì)列里回調(diào)函數(shù)執(zhí)行，再次空閑，再調(diào)度的循環(huán)過程，就叫事件循環(huán)

4.微任務(wù)和宏任務(wù)

微任務(wù)代碼：宿主環(huán)境是JS引擎 Promise等 優(yōu)先執(zhí)行

宏任務(wù)代碼：宿主環(huán)境是瀏覽器 script 事件 網(wǎng)絡(luò)請(qǐng)求 定時(shí)器

異步任務(wù)的回調(diào)函數(shù)，才會(huì)放入任務(wù)隊(duì)列中，等待被執(zhí)行棧調(diào)用 微任務(wù)在宏任務(wù)之前被執(zhí)行

柚子快報(bào)邀請(qǐng)碼778899分享：前端 Ajax學(xué)習(xí)

http://yzkb.51969.com/

參考鏈接