《邪惡冥刻》全場景解謎對局攻略
axios從入門到原始碼分析
第1章：HTTP相關
1.1.MDN文件
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
1.2.HTTP請求互動的基本過程
1.前後應用從瀏覽器端向伺服器傳送HTTP請求(請求報文)
2.後臺伺服器接收到請求後,排程伺服器應用處理請求,向瀏覽器端返回HTTP
響應(響應報文)
3.瀏覽器端接收到響應,解析顯示響應體/呼叫監視回撥
1.3.HTTP請求報文
1.請求行:
method url
GET /product_detail?id=2 POST /login
2.多個請求頭
Host:www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded或者application/json
3.請求體
username=tom&pwd=123
{"username": "tom", "pwd": 123}
1.4.HTTP響應報文
1.響應狀態行:statusstatusText
2.多個響應頭
Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
3.響應體
html文字/json文字/js/css/圖片...
1.5.post請求體引數格式
4.Content-Type:application/x-www-form-urlencoded;charset=utf-8
用於鍵值對引數，引數的鍵值用=連線,引數之間用&連線例如: name=%E5%B0%8F%E6%98%8E&age=12
5.Content-Type:application/json;charset=utf-8
用於json字串引數
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
6.Content-Type:multipart/form-data
用於檔案上傳請求
1.6.常見的響應狀態碼
|
200 |
OK |
請求成功。一般用於GET與POST請求 |
|
201 |
Created |
已建立。成功請求並建立了新的資源 |
|
401 |
Unauthorized |
未授權/請求要求使用者的身份認證 |
|
404 |
Not Found |
伺服器無法根據客戶端的請求找到資源 |
|
500 |
Internal Server Error |
伺服器內部錯誤，無法完成請求 |
1.7.不同型別的請求及其作用
1.GET:從伺服器端讀取資料
2.POST:向伺服器端新增新資料
3.PUT:更新伺服器端已經資料
4.DELETE:刪除伺服器端資料
1.8.API的分類
1.RESTAPI:restful
(1)傳送請求進行CRUD哪個操作由請求方式來決定
(2)同一個請求路徑可以進行多個操作
(3)請求方式會用到GET/POST/PUT/DELETE
2.非RESTAPI:restless
(1)請求方式不決定請求的CRUD操作
(2)一個請求路徑只對應一個操作
(3)一般只有GET/POST
1.9.使用json-server搭建RESTAPI
1.9.1.json-server是什麼?
用來快速搭建REST API的工具包
1.9.2.使用json-server
1.線上文件:https://github.com/typicode/json-server
2.下載:npminstall-gjson-server
3.目標根目錄下建立資料庫json檔案:db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
4.啟動伺服器執行命令:json-server--watchdb.json
1.9.3.使用瀏覽器訪問測試
http://localhost:3000/posts http://localhost:3000/posts/1
1.9.4.使用axios訪問測試
第2章：XHR的理解和使用
2.1.MDN文件
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
2.2.理解
1.使用XMLHttpRequest(XHR)物件可以與伺服器互動,也就是傳送ajax請求
2.前端可以獲取到資料，而無需讓整個的頁面重新整理。
3.這使得Web頁面可以只更新頁面的區域性，而不影響使用者的操作。
2.3.區別一般http請求與ajax請求
1.ajax請求是一種特別的http請求
2.對伺服器端來說,沒有任何區別,區別在瀏覽器端
3.瀏覽器端發請求:只有XHR或fetch發出的才是ajax請求,其它所有的都是非ajax請求
4.瀏覽器端接收到響應
(1)一般請求:瀏覽器一般會直接顯示響應體資料,也就是我們常說的重新整理/跳轉頁面
(2)ajax請求:瀏覽器不會對介面進行任何更新操作,只是呼叫監視的回撥函式並傳入響應相關資料
2.4.API
1.XMLHttpRequest():建立XHR物件的建構函式
2.status:響應狀態碼值,比如200,404
3.statusText:響應狀態文字
4.readyState:標識請求狀態的只讀屬性
0:初始
1:open()之後
2:send()之後
3:請求中
4:請求完成
5.onreadystatechange:繫結readyState改變的監聽
6.responseType:指定響應資料型別,如果是'json',得到響應後自動解析響應體資料
7.response:響應體資料,型別取決於responseType的指定
8.timeout:指定請求超時時間,預設為0代表沒有限制
9.ontimeout:繫結超時的監聽
10.onerror:繫結請求網路錯誤的監聽
11.open():初始化一個請求,引數為: (method,url[,async])
12.send(data):傳送請求
13.abort():中斷請求
14.getResponseHeader(name):獲取指定名稱的響應頭值
15.getAllResponseHeaders():獲取所有響應頭組成的字串
16.setRequestHeader(name,value):設定請求頭
2.5.XHR的ajax封裝(簡單版axios)
2.5.1.特點
1.函式的返回值為promise,成功的結果為response,異常的結果為error
2.能處理多種型別的請求:GET/POST/PUT/DELETE
3.函式的引數為一個配置物件
{
url:'',//請求地址
method:'',//請求方式GET/POST/PUT/DELETEparams:{},//GET/DELETE請求的query引數data:{}, //POST或DELETE請求的請求體引數
}
4.響應json資料自動解析為js
2.5.2.編碼實現
———————————————————————————
———————————————————————————
2.5.3.使用測試
第3章：axios的理解和使用
3.1.axios是什麼?
1.前端最流行的ajax請求庫
2.react/vue官方都推薦使用axios發ajax請求
3.文件:https://github.com/axios/axios
3.2.axios特點
1.基本promise的非同步ajax請求庫
2.瀏覽器端/node端都可以使用
3.支援請求／響應攔截器
4.支援請求取消
5.請求/響應資料轉換
6.批量傳送多個請求
3.3.axios常用語法
axios(config):通用/最本質的發任意型別請求的方式
axios(url[, config]):可以只指定url發get請求
axios.request(config):等同於axios(config) axios.get(url[,config]):發get請求axios.delete(url[,config]):發delete請求axios.post(url[,data,config]):發post請求axios.put(url[,data,config]):發put請求
axios.defaults.xxx:請求的預設全域性配置
axios.interceptors.request.use():新增請求攔截器
axios.interceptors.response.use():新增響應攔截器
axios.create([config]):建立一個新的axios(它沒有下面的功能)
axios.Cancel():用於建立取消請求的錯誤物件axios.CancelToken():用於建立取消請求的token物件axios.isCancel():是否是一個取消請求的錯誤
axios.all(promises):用於批量執行多個非同步請求
axios.spread():用來指定接收所有成功資料的回撥函式的方法
3.4.難點語法的理解和使用
3.4.1.axios.create(config)
1.根據指定配置建立一個新的axios,也就就每個新axios都有自己的配置
2.新axios只是沒有取消請求和批量發請求的方法,其它所有語法都是一致的
3.為什麼要設計這個語法?
(1)需求:專案中有部分介面需要的配置與另一部分介面需要的配置不太一樣,如何處理
(2)解決:建立2個新axios,每個都有自己特有的配置,分別應用到不同要求的介面請求中
3.4.2.攔截器函式/ajax請求/請求的回撥函式的呼叫順序
1.說明:呼叫axios()並不是立即傳送ajax請求,而是需要經歷一個較長的流程
2.流程:請求攔截器2=>請求攔截器1=>發ajax請求=>響應攔截器1=> 響應攔截器2=>請求的回撥
3.注意:此流程是通過promise串連起來的,請求攔截器傳遞的是config,響應攔截器傳遞的是response
3.4.3.取消請求
1.基本流程
配置cancelToken物件
快取用於取消請求的cancel函式
在後面特定時機呼叫cancel函式取消請求
在錯誤回撥中判斷如果error是cancel,做相應處理
2.實現功能
點選按鈕,取消某個正在請求中的請求
在請求一個介面前,取消前面一個未完成的請求
第4章：axios原始碼分析
4.1.原始碼目錄結構
├──/dist/# 專案輸出目錄
├──/lib/# 專案原始碼目錄
│ ├──/adapters/#定義請求的介面卡xhr、http
│ │ ├──http.js#實現http介面卡(包裝http包)
│ │ └──xhr.js#實現xhr介面卡(包裝xhr物件)
│ ├──/cancel/#定義取消功能
│ ├──/core/#一些核心功能
│ │ ├──Axios.js#axios的核心主類
│ │ ├──dispatchRequest.js#用來呼叫http請求介面卡方法傳送請求的函式
│ │ ├──InterceptorManager.js#攔截器的管理器
│ │ └──settle.js#根據http響應狀態，改變Promise的狀態
│ ├──/helpers/#一些輔助方法
│ ├──axios.js#對外暴露介面
│ ├──defaults.js#axios的預設配置
│ └──utils.js# 公用工具
├──package.json# 專案資訊
├──index.d.ts#配置TypeScript的宣告檔案
└──index.js#入口檔案
4.2.原始碼分析
4.2.1.axios與Axios的關係?
1.從語法上來說:axios不是Axios的例項
2.從功能上來說:axios是Axios的例項
3.axios是Axios.prototype.request函式bind()返回的函式
4.axios作為物件有Axios原型物件上的所有方法,有Axios物件上所有屬性
4.2.2.instance與axios的區別?
1.相同:
(1)都是一個能發任意請求的函式:request(config)
(2)都有發特定請求的各種方法:get()/post()/put()/delete()
(3)都有預設配置和攔截器的屬性:defaults/interceptors
2.不同:
(1)預設匹配的值很可能不一樣
(2)instance沒有axios後面新增的一些方法:create()/CancelToken()/all()
4.2.3.axios執行的整體流程?
1.整體流程:
request(config)==>dispatchRequest(config)==>xhrAdapter(config)
2.request(config):
將請求攔截器/ dispatchRequest() /響應攔截器通過promise鏈串連起來,返回promise
3.dispatchRequest(config):
轉換請求資料===>呼叫xhrAdapter()發請求===>請求返回後轉換響應資料.返回promise
4.xhrAdapter(config):
建立XHR物件,根據config進行相應設定,傳送特定請求,並接收響應資料,返回promise
4.2.4.axios的請求/響應攔截器是什麼?
1.請求攔截器:
在真正傳送請求前執行的回撥函式
可以對請求進行檢查或配置進行特定處理
成功的回撥函式,傳遞的預設是config(也必須是)
失敗的回撥函式,傳遞的預設是error
2.響應攔截器
在請求得到響應後執行的回撥函式可以對響應資料進行特定處理
成功的回撥函式,傳遞的預設是response
失敗的回撥函式,傳遞的預設是error
4.2.5.axios的請求/響應資料轉換器是什麼?
1.請求轉換器:對請求頭和請求體資料進行特定處理的函式
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); return JSON.stringify(data);
}
2.響應轉換器:將響應體json字串解析為js物件或陣列的函式
response.data = JSON.parse(response.data)
4.2.6.response的整體結構
{
data, status, statusText, headers, config, request
}
4.2.7.error的整體結構
{
message,
response, request,
}
4.2.8.如何取消未完成的請求?
1.當配置了cancelToken物件時,儲存cancel函式
(1)建立一個用於將來中斷請求的cancelPromise
(2)並定義了一個用於取消請求的cancel函式
(3)將cancel函式傳遞出來
2.呼叫cancel()取消請求
(1)執行cacel函式,傳入錯誤資訊message
(2)內部會讓cancelPromise變為成功,且成功的值為一個Cancel物件
(3)在cancelPromise的成功回撥中中斷請求,並讓發請求的proimse失敗,失敗的reason為Cacel物件
axios從入門到原始碼分析
第1章：HTTP相關
1.1.MDN文件
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview
1.2.HTTP請求互動的基本過程
1.前後應用從瀏覽器端向伺服器傳送HTTP請求(請求報文)
2.後臺伺服器接收到請求後,排程伺服器應用處理請求,向瀏覽器端返回HTTP
響應(響應報文)
3.瀏覽器端接收到響應,解析顯示響應體/呼叫監視回撥
1.3.HTTP請求報文
1.請求行:
method url
GET /product_detail?id=2 POST /login
2.多個請求頭
Host:www.baidu.com
Cookie: BAIDUID=AD3B0FA706E; BIDUPSID=AD3B0FA706;
Content-Type: application/x-www-form-urlencoded或者application/json
3.請求體
username=tom&pwd=123
{"username": "tom", "pwd": 123}
1.4.HTTP響應報文
1.響應狀態行:statusstatusText
2.多個響應頭
Content-Type: text/html;charset=utf-8 Set-Cookie: BD_CK_SAM=1;path=/
3.響應體
html文字/json文字/js/css/圖片...
1.5.post請求體引數格式
4.Content-Type:application/x-www-form-urlencoded;charset=utf-8
用於鍵值對引數，引數的鍵值用=連線,引數之間用&連線例如: name=%E5%B0%8F%E6%98%8E&age=12
5.Content-Type:application/json;charset=utf-8
用於json字串引數
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
6.Content-Type:multipart/form-data
用於檔案上傳請求
1.6.常見的響應狀態碼
|
200 |
OK |
請求成功。一般用於GET與POST請求 |
|
201 |
Created |
已建立。成功請求並建立了新的資源 |
|
401 |
Unauthorized |
未授權/請求要求使用者的身份認證 |
|
404 |
Not Found |
伺服器無法根據客戶端的請求找到資源 |
|
500 |
Internal Server Error |
伺服器內部錯誤，無法完成請求 |
1.7.不同型別的請求及其作用
1.GET:從伺服器端讀取資料
2.POST:向伺服器端新增新資料
3.PUT:更新伺服器端已經資料
4.DELETE:刪除伺服器端資料
1.8.API的分類
1.RESTAPI:restful
(1)傳送請求進行CRUD哪個操作由請求方式來決定
(2)同一個請求路徑可以進行多個操作
(3)請求方式會用到GET/POST/PUT/DELETE
2.非RESTAPI:restless
(1)請求方式不決定請求的CRUD操作
(2)一個請求路徑只對應一個操作
(3)一般只有GET/POST
1.9.使用json-server搭建RESTAPI
1.9.1.json-server是什麼?
用來快速搭建REST API的工具包
1.9.2.使用json-server
1.線上文件:https://github.com/typicode/json-server
2.下載:npminstall-gjson-server
3.目標根目錄下建立資料庫json檔案:db.json
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
4.啟動伺服器執行命令:json-server--watchdb.json
1.9.3.使用瀏覽器訪問測試
http://localhost:3000/posts http://localhost:3000/posts/1
1.9.4.使用axios訪問測試
第2章：XHR的理解和使用
2.1.MDN文件
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
2.2.理解
1.使用XMLHttpRequest(XHR)物件可以與伺服器互動,也就是傳送ajax請求
2.前端可以獲取到資料，而無需讓整個的頁面重新整理。
3.這使得Web頁面可以只更新頁面的區域性，而不影響使用者的操作。
2.3.區別一般http請求與ajax請求
1.ajax請求是一種特別的http請求
2.對伺服器端來說,沒有任何區別,區別在瀏覽器端
3.瀏覽器端發請求:只有XHR或fetch發出的才是ajax請求,其它所有的都是非ajax請求
4.瀏覽器端接收到響應
(1)一般請求:瀏覽器一般會直接顯示響應體資料,也就是我們常說的重新整理/跳轉頁面
(2)ajax請求:瀏覽器不會對介面進行任何更新操作,只是呼叫監視的回撥函式並傳入響應相關資料
2.4.API
1.XMLHttpRequest():建立XHR物件的建構函式
2.status:響應狀態碼值,比如200,404
3.statusText:響應狀態文字
4.readyState:標識請求狀態的只讀屬性
0:初始
1:open()之後
2:send()之後
3:請求中
4:請求完成
5.onreadystatechange:繫結readyState改變的監聽
6.responseType:指定響應資料型別,如果是'json',得到響應後自動解析響應體資料
7.response:響應體資料,型別取決於responseType的指定
8.timeout:指定請求超時時間,預設為0代表沒有限制
9.ontimeout:繫結超時的監聽
10.onerror:繫結請求網路錯誤的監聽
11.open():初始化一個請求,引數為: (method,url[,async])
12.send(data):傳送請求
13.abort():中斷請求
14.getResponseHeader(name):獲取指定名稱的響應頭值
15.getAllResponseHeaders():獲取所有響應頭組成的字串
16.setRequestHeader(name,value):設定請求頭
2.5.XHR的ajax封裝(簡單版axios)
2.5.1.特點
1.函式的返回值為promise,成功的結果為response,異常的結果為error
2.能處理多種型別的請求:GET/POST/PUT/DELETE
3.函式的引數為一個配置物件
{
url:'',//請求地址
method:'',//請求方式GET/POST/PUT/DELETEparams:{},//GET/DELETE請求的query引數data:{}, //POST或DELETE請求的請求體引數
}
4.響應json資料自動解析為js
2.5.2.編碼實現
———————————————————————————
———————————————————————————
2.5.3.使用測試
第3章：axios的理解和使用
3.1.axios是什麼?
1.前端最流行的ajax請求庫
2.react/vue官方都推薦使用axios發ajax請求
3.文件:https://github.com/axios/axios
3.2.axios特點
1.基本promise的非同步ajax請求庫
2.瀏覽器端/node端都可以使用
3.支援請求／響應攔截器
4.支援請求取消
5.請求/響應資料轉換
6.批量傳送多個請求
3.3.axios常用語法
axios(config):通用/最本質的發任意型別請求的方式
axios(url[, config]):可以只指定url發get請求
axios.request(config):等同於axios(config) axios.get(url[,config]):發get請求axios.delete(url[,config]):發delete請求axios.post(url[,data,config]):發post請求axios.put(url[,data,config]):發put請求
axios.defaults.xxx:請求的預設全域性配置
axios.interceptors.request.use():新增請求攔截器
axios.interceptors.response.use():新增響應攔截器
axios.create([config]):建立一個新的axios(它沒有下面的功能)
axios.Cancel():用於建立取消請求的錯誤物件axios.CancelToken():用於建立取消請求的token物件axios.isCancel():是否是一個取消請求的錯誤
axios.all(promises):用於批量執行多個非同步請求
axios.spread():用來指定接收所有成功資料的回撥函式的方法
3.4.難點語法的理解和使用
3.4.1.axios.create(config)
1.根據指定配置建立一個新的axios,也就就每個新axios都有自己的配置
2.新axios只是沒有取消請求和批量發請求的方法,其它所有語法都是一致的
3.為什麼要設計這個語法?
(1)需求:專案中有部分介面需要的配置與另一部分介面需要的配置不太一樣,如何處理
(2)解決:建立2個新axios,每個都有自己特有的配置,分別應用到不同要求的介面請求中
3.4.2.攔截器函式/ajax請求/請求的回撥函式的呼叫順序
1.說明:呼叫axios()並不是立即傳送ajax請求,而是需要經歷一個較長的流程
2.流程:請求攔截器2=>請求攔截器1=>發ajax請求=>響應攔截器1=> 響應攔截器2=>請求的回撥
3.注意:此流程是通過promise串連起來的,請求攔截器傳遞的是config,響應攔截器傳遞的是response
3.4.3.取消請求
1.基本流程
配置cancelToken物件
快取用於取消請求的cancel函式
在後面特定時機呼叫cancel函式取消請求
在錯誤回撥中判斷如果error是cancel,做相應處理
2.實現功能
點選按鈕,取消某個正在請求中的請求
在請求一個介面前,取消前面一個未完成的請求
第4章：axios原始碼分析
4.1.原始碼目錄結構
├──/dist/# 專案輸出目錄
├──/lib/# 專案原始碼目錄
│ ├──/adapters/#定義請求的介面卡xhr、http
│ │ ├──http.js#實現http介面卡(包裝http包)
│ │ └──xhr.js#實現xhr介面卡(包裝xhr物件)
│ ├──/cancel/#定義取消功能
│ ├──/core/#一些核心功能
│ │ ├──Axios.js#axios的核心主類
│ │ ├──dispatchRequest.js#用來呼叫http請求介面卡方法傳送請求的函式
│ │ ├──InterceptorManager.js#攔截器的管理器
│ │ └──settle.js#根據http響應狀態，改變Promise的狀態
│ ├──/helpers/#一些輔助方法
│ ├──axios.js#對外暴露介面
│ ├──defaults.js#axios的預設配置
│ └──utils.js# 公用工具
├──package.json# 專案資訊
├──index.d.ts#配置TypeScript的宣告檔案
└──index.js#入口檔案
4.2.原始碼分析
4.2.1.axios與Axios的關係?
1.從語法上來說:axios不是Axios的例項
2.從功能上來說:axios是Axios的例項
3.axios是Axios.prototype.request函式bind()返回的函式
4.axios作為物件有Axios原型物件上的所有方法,有Axios物件上所有屬性
4.2.2.instance與axios的區別?
1.相同:
(1)都是一個能發任意請求的函式:request(config)
(2)都有發特定請求的各種方法:get()/post()/put()/delete()
(3)都有預設配置和攔截器的屬性:defaults/interceptors
2.不同:
(1)預設匹配的值很可能不一樣
(2)instance沒有axios後面新增的一些方法:create()/CancelToken()/all()
4.2.3.axios執行的整體流程?
1.整體流程:
request(config)==>dispatchRequest(config)==>xhrAdapter(config)
2.request(config):
將請求攔截器/ dispatchRequest() /響應攔截器通過promise鏈串連起來,返回promise
3.dispatchRequest(config):
轉換請求資料===>呼叫xhrAdapter()發請求===>請求返回後轉換響應資料.返回promise
4.xhrAdapter(config):
建立XHR物件,根據config進行相應設定,傳送特定請求,並接收響應資料,返回promise
4.2.4.axios的請求/響應攔截器是什麼?
1.請求攔截器:
在真正傳送請求前執行的回撥函式
可以對請求進行檢查或配置進行特定處理
成功的回撥函式,傳遞的預設是config(也必須是)
失敗的回撥函式,傳遞的預設是error
2.響應攔截器
在請求得到響應後執行的回撥函式可以對響應資料進行特定處理
成功的回撥函式,傳遞的預設是response
失敗的回撥函式,傳遞的預設是error
4.2.5.axios的請求/響應資料轉換器是什麼?
1.請求轉換器:對請求頭和請求體資料進行特定處理的函式
if (utils.isObject(data)) {
setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); return JSON.stringify(data);
}
2.響應轉換器:將響應體json字串解析為js物件或陣列的函式
response.data = JSON.parse(response.data)
4.2.6.response的整體結構
{
data, status, statusText, headers, config, request
}
4.2.7.error的整體結構
{
message,
response, request,
}
4.2.8.如何取消未完成的請求?
1.當配置了cancelToken物件時,儲存cancel函式
(1)建立一個用於將來中斷請求的cancelPromise
(2)並定義了一個用於取消請求的cancel函式
(3)將cancel函式傳遞出來
2.呼叫cancel()取消請求
(1)執行cacel函式,傳入錯誤資訊message
(2)內部會讓cancelPromise變為成功,且成功的值為一個Cancel物件
(3)在cancelPromise的成功回撥中中斷請求,並讓發請求的proimse失敗,失敗的reason為Cacel物件