柚子快報激活碼778899分享：ajax學(xué)習(xí)筆記

http://yzkb.51969.com/

文章目錄

AJAX一、ajax用處二、axios使用語法三、認(rèn)識url1、定義2、url組成3、url查詢參數(shù)

四、常用請求方法1、axios請求配置

五、HTTP響應(yīng)狀態(tài)碼六、HTTP響應(yīng)報文的組成七、form-serialize插件1、注意事項

八、bootstrap彈框使用1、彈框使用步驟

九、圖書管理1、渲染列表

十、圖片上傳十一、Promise1、定義：用于表示異步操作的最終完成（或失?。┘捌浣Y(jié)果值2、好處：3、語法4、promise對象三種狀態(tài)

十二、同步和異步1、同步：逐行執(zhí)行，需原地等待結(jié)果后，才繼續(xù)向下運行2、異步：調(diào)用后耗時，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待，在將來完成后觸發(fā)一個回調(diào)函數(shù)）

十三、回調(diào)函數(shù)地獄1、概念：在回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，一直嵌套下去就形成了回調(diào)函數(shù)地獄2、缺點：可讀性差，異常無法捕獲，耦合性嚴(yán)重，牽一發(fā)而動全身

十四、Promise - 鏈?zhǔn)秸{(diào)用（可有效解決回調(diào)地獄問題）十五、async函數(shù)和await1、捕獲錯誤

十六、事件循環(huán)1、概念：JS有一個基于事件循環(huán)地并發(fā)模型，事件循環(huán)負(fù)責(zé)執(zhí)行代碼、收集和處理事件以及執(zhí)行隊列中的子任務(wù)。2、原因：JS是單線程的，為了讓耗時代碼不阻塞其他代碼運行，設(shè)計了事件循環(huán)模型3、執(zhí)行過程

十七、微任務(wù)與宏任務(wù)十八、項目準(zhǔn)備1、目錄管理2、手機＋驗證碼，登錄流程3、token介紹4、個人信息設(shè)置和axios請求攔截器（1）請求攔截器

5、axios響應(yīng)攔截器6、axios響應(yīng)結(jié)果優(yōu)化7、發(fā)布文章-封面設(shè)置

AJAX

一、ajax用處

瀏覽器和服務(wù)器之間通信，動態(tài)數(shù)據(jù)交互

二、axios使用語法

引入axios.js:http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 使用axios函數(shù)：

傳入配置對象使用.then回調(diào)函數(shù)接受結(jié)果，并作后續(xù)處理

三、認(rèn)識url

1、定義

統(tǒng)一資源定位符，簡稱網(wǎng)址

2、url組成

3、url查詢參數(shù)

定義：瀏覽器提供給服務(wù)器的額外信息，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)

語法：

使用axios提供的param選項

四、常用請求方法

1、axios請求配置

urlmethod：請求的方法，get可以省略data：提交數(shù)據(jù)

五、HTTP響應(yīng)狀態(tài)碼

六、HTTP響應(yīng)報文的組成

響應(yīng)行：協(xié)議、HTTP響應(yīng)狀態(tài)碼、狀態(tài)信息響應(yīng)頭：以鍵值對的格式攜帶的附加信息，比如Content-Type空行：分隔響應(yīng)頭，空行之后的是返回給瀏覽器的資源響應(yīng)體：返回的資源

七、form-serialize插件

作用：快速收集表單元素的值 語法：

1、注意事項

參數(shù)一：要收集哪個表單的數(shù)據(jù)

表單元素設(shè)置name屬性，值會作為對象的屬性名建議name屬性的值，最好和接口文檔參數(shù)名一致 參數(shù)二：配置對象

hash 設(shè)置獲取數(shù)據(jù)結(jié)構(gòu)

true：JS對象 一般請求體里提交給服務(wù)器false：查詢字符串 empty：設(shè)置是否獲取空值 推薦獲取空值

八、bootstrap彈框使用

1、彈框使用步驟

引入css和js庫，且初始不可見通過自定義屬性，控制彈框的顯示和隱藏：

九、圖書管理

1、渲染列表

自己的圖書數(shù)據(jù)：給自己起個外號，并告訴服務(wù)器，默認(rèn)會有三本書，基于這三本書做數(shù)據(jù)的增刪改查

方法：

axios({

url:'……'

params: {

creator: '....'

}

})

十、圖片上傳

獲取圖片文件對象使用FormData攜帶圖片文件

提交表單數(shù)據(jù)到服務(wù)器，使用圖片url地址

十一、Promise

1、定義：用于表示異步操作的最終完成（或失?。┘捌浣Y(jié)果值

2、好處：

邏輯更清晰了解axios函數(shù)內(nèi)部運作能解決回調(diào)函數(shù)地獄的問題

3、語法

4、promise對象三種狀態(tài)

十二、同步和異步

1、同步：逐行執(zhí)行，需原地等待結(jié)果后，才繼續(xù)向下運行

2、異步：調(diào)用后耗時，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待，在將來完成后觸發(fā)一個回調(diào)函數(shù)）

十三、回調(diào)函數(shù)地獄

1、概念：在回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，一直嵌套下去就形成了回調(diào)函數(shù)地獄

2、缺點：可讀性差，異常無法捕獲，耦合性嚴(yán)重，牽一發(fā)而動全身

十四、Promise - 鏈?zhǔn)秸{(diào)用（可有效解決回調(diào)地獄問題）

概念： 依靠then方法會返回一個新生成的Promise對象特性，繼續(xù)串聯(lián)下一環(huán)任務(wù)，直到結(jié)束細(xì)節(jié)： then（）回調(diào)函數(shù)中的返回值，會影響新生成的Promise對象最終狀態(tài)和結(jié)果做法： 每個Promise對象中管理一個異步任務(wù)，用then返回Promise對象，串聯(lián)起來

十五、async函數(shù)和await

可以讓我們用一種更為簡潔的方式寫出基于Promise的異步行為而無需可以地鏈?zhǔn)秸{(diào)用Promise

概念：在async函數(shù)內(nèi)使用await關(guān)鍵字取代then函數(shù)，等待獲取Promise對象成功狀態(tài)返回值

1、捕獲錯誤

try…catch使用

十六、事件循環(huán)

1、概念：JS有一個基于事件循環(huán)地并發(fā)模型，事件循環(huán)負(fù)責(zé)執(zhí)行代碼、收集和處理事件以及執(zhí)行隊列中的子任務(wù)。

2、原因：JS是單線程的，為了讓耗時代碼不阻塞其他代碼運行，設(shè)計了事件循環(huán)模型

3、執(zhí)行過程

執(zhí)行同步代碼，遇到異步代碼交給宿主瀏覽器環(huán)境執(zhí)行異步有結(jié)果后，把回調(diào)函數(shù)放入任務(wù)隊列排隊當(dāng)調(diào)用?？臻e后，反復(fù)調(diào)用任務(wù)隊列里的回調(diào)函數(shù)

十七、微任務(wù)與宏任務(wù)

宏任務(wù)：由瀏覽器環(huán)境執(zhí)行的異步代碼

微任務(wù)：由JS引擎環(huán)境執(zhí)行的異步代碼

微任務(wù)隊列清空后，才會執(zhí)行宏任務(wù)隊列

十八、項目準(zhǔn)備

1、目錄管理

assets：資源文件夾（圖片，字體）lib：資料文件夾（第三方插件，例如：form-serialize）page：頁面文件夾utils：實用程序文件夾（工具插件）

2、手機＋驗證碼，登錄流程

3、token介紹

概念：訪問權(quán)限的令牌，本質(zhì)上是一串字符串創(chuàng)建：正確登陸后，由后端簽發(fā)并返回成功作用：判斷是否有登陸狀態(tài)，控制訪問權(quán)限

前端只能判斷有無token，后端判斷真實性

4、個人信息設(shè)置和axios請求攔截器

需求：設(shè)置用戶昵稱語法：axios可以在headers選項傳遞請求頭參數(shù)

（1）請求攔截器

發(fā)起請求之前，配置的觸發(fā)函數(shù)，對請求參數(shù)進(jìn)行額外配置

使用時間

有公共配置和設(shè)置時，統(tǒng)一設(shè)置在請求攔截器中

5、axios響應(yīng)攔截器

響應(yīng)到達(dá)then/catch之前，觸發(fā)的攔截函數(shù)，對響應(yīng)結(jié)果統(tǒng)一處理

例如：身份驗證失敗，統(tǒng)一判斷并作處理

6、axios響應(yīng)結(jié)果優(yōu)化

axios響應(yīng)都要經(jīng)過響應(yīng)攔截器，所以可以在響應(yīng)攔截器中直接規(guī)定返回的結(jié)果

7、發(fā)布文章-封面設(shè)置

步驟：

準(zhǔn)備標(biāo)簽結(jié)構(gòu)和樣式選擇文件并保存在FormData單獨上傳圖片并得到圖片URL地址會先并切換img標(biāo)簽戰(zhàn)術(shù)（隱藏+號上傳標(biāo)簽）

注意：圖片地址臨時存儲在img標(biāo)簽上，并未和文章關(guān)聯(lián)保存

柚子快報激活碼778899分享：ajax學(xué)習(xí)筆記

http://yzkb.51969.com/

參考閱讀