一、移動端怎麼做適配？
面試官問你這個問題其實就是想問你響應式佈局，實現響應式佈局的方式有哪些？
1. 使用媒體查詢（Media Queries）
媒體查詢是 CSS3 中引入的一種方式，可以針對不同的裝置或螢幕尺寸應用不同的樣式規則。透過媒體查詢，可以編寫響應式的 CSS，使頁面在不同裝置上呈現最佳視覺效果。
例如：
/* 預設樣式 */
body {
font-size: 16px;
}
/* 螢幕寬度小於600px時的樣式 */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 螢幕寬度大於1200px時的樣式 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}
2. 使用百分比單位
使用百分比單位而不是固定單位（如 px）可以使佈局更加靈活，更容易適應不同尺寸的螢幕。
<div style="width: 100%;"> <div style="width: 50%;">Half of the container's width</div> <div style="width: 50%;">Another half</div> </div>
3. 使用視窗單位（Viewport Units）
視窗單位（vw、vh、vmin、vmax）根據視口（viewport）的大小來確定長度，非常適合用於響應式設計。
1vw等於視口寬度的 1%。1vh等於視口高度的 1%。1vmin等於視口寬度或高度中較小的一個的 1%。1vmax等於視口寬度或高度中較大的一個的 1%。
body {
font-size: 2vw; /* 字型大小為視口寬度的 2% */
}
.container {
height: 50vh; /* 高度為視口高度的一半 */
}
4. 使用 REM 單位
REM（root em）單位相對於根元素（即 html 元素）的字型大小。設定 html 的字型大小，然後使用 REM 作為其他元素的大小單位，可以實現全域性統一的縮放。
html {
font-size: 16px; /* 預設字型大小 */
}
body {
font-size: 1rem; /* 等於 16px */
}
@media screen and (max-width: 600px) {
html {
font-size: 12px; /* 在小螢幕上縮小字型大小 */
}
}
h1 {
font-size: 2rem; /* 等於 32px （預設情況下） */
}
5. 使用 Flexbox 或 Grid 佈局
Flexbox 和 Grid 佈局提供了強大的佈局工具，可以輕鬆實現複雜的響應式佈局。
/* Flexbox */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: 50%; /* 每個專案佔據一半的寬度 */
}
/* Grid */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.item {
/* 專案樣式 */
}
三、rem單位是怎麼計算的？
rem（root em）單位是 CSS 中的一種相對單位，它相對於文件的根元素（通常是 <html> 元素）的字型大小來計算長度。rem 單位的主要優點在於它提供了一種全域性的相對尺寸，使得整個頁面的佈局可以統一縮放。
rem 單位的計算方式
基本概念：
em單位相對於父元素的字型大小。rem單位相對於根元素（通常是<html>）的字型大小。計算公式：
如果根元素的字型大小為
font-size，那麼1rem就等於font-size的值。如果某個元素的
font-size設定為2rem，那麼它的字型大小就是根元素字型大小的兩倍。
使用 rem 單位的好處：
全域性一致性：在整個頁面中使用相同的基準字型大小，可以保持樣式的一致性。
易於維護：只需要更改根元素的字型大小即可調整整個頁面的佈局。
響應式設計：結合媒體查詢和 JavaScript 動態調整，可以實現更精細的響應式設計。
四、瞭解less和sass嗎
在前端開發中，LESS 和 SASS（Syntactically Awesome Style Sheets）都是前處理器語言，用於擴充套件 CSS 的功能，使得 CSS 更加模組化、可維護和強大。前處理器語言允許你在 CSS 中使用變數、巢狀規則、混合（mixins）、函式等功能，從而簡化 CSS 的編寫和管理。
LESS
LESS 是一種基於 JavaScript 的 CSS 前處理器。LESS 程式碼可以在客戶端（瀏覽器）或伺服器端執行，將 LESS 程式碼編譯成普通的 CSS。LESS 的語法接近 CSS，並且易於學習和使用。
LESS 的特點：
1、變數：
定義變數來儲存顏色、尺寸等常用值，方便複用和修改。
示例：
@primary-color: #ff0000; .header { color: @primary-color; }
2、巢狀選擇器：
支援巢狀選擇器，使得 CSS 規則更易讀。
示例：
.container {
.header {
color: red;
}
.content {
padding: 10px;
}
}
3、混合（Mixins）：
定義一組屬性，可以像函式一樣呼叫。
4、運算子：
支援數學運算。
5、函式：
可以定義函式來執行復雜的操作。
6、匯入：
可以匯入其他 LESS 檔案。
SASS
SASS 是另一種流行的 CSS 前處理器。SASS 有兩種語法格式：SCSS（Sassy CSS）和原生 SASS。SCSS 語法類似於 CSS，並且支援 CSS 的所有特性加上 SASS 的增強功能。原生 SASS 語法則完全不同，使用縮排來表示巢狀。
SCSS 特點：
1、變數：
與 LESS 類似，可以定義和使用變數。
示例
$primary-color: #ff0000;
.header {
color: $primary-color;
}
2、巢狀選擇器：
支援巢狀選擇器。
3、混合（Mixins）：
可以定義和使用混合。
4、運算子：
支援數學運算。
5、函式：
可以定義函式來執行復雜的操作。
6、匯入：
可以匯入其他 SASS 檔案。
總結
LESS 和 SASS 都是非常有用的 CSS 前處理器，它們提供了許多強大的功能，如變數、巢狀、混合、函式等，使得 CSS 的編寫更加高效和可維護。選擇哪個前處理器主要取決於個人或團隊的偏好以及專案的具體需求。如果你熟悉 JavaScript，可能更傾向於使用 LESS；如果你喜歡簡潔的語法，可能會更喜歡 SASS（尤其是 SCSS）。無論選擇哪一個，都可以顯著提高前端開發的效率和程式碼質量。
五、v-model的實現原理
v-model 是 Vue.js 框架提供的一個指令，用於實現表單元素與 Vue 例項資料之間的雙向資料繫結。 它的原理是： 在模板中使用 v-model 指令繫結表單元素的 value 屬性（例如 input、textarea、select 等）到 Vue 例項中的一個屬性。
當用戶在表單元素中輸入內容時，該元素的 value 值會被更新，並觸發 oninput 事件。
Vue.js 監聽該元素的 oninput 事件，並透過新舊值的比較來確定資料是否發生了變化。
如果資料已經發生變化，則更新 Vue 例項中繫結的屬性值，從而實現資料的雙向繫結。
如果使用者在表單元素中按下回車鍵或者失去焦點，則該元素的 onchange 事件也會觸發。Vue.js 同樣監聽該事件，並在事件處理函式中將表單元素的值同步到 Vue 例項中。
綜上，v-model 的雙向繫結原理就是透過在模板中繫結表單元素的 value 屬性和監聽表單元素的 input 和 change 事件來實現的。它可以大大簡化開發人員對錶單資料的處理和管理，使得程式碼更加簡潔易讀。
一、v-model雙向繫結原理 1、v-model是v-on和v-bind的語法糖 v-on用於事件繫結，給當前元件繫結一個input事件。 v-bind用於屬性繫結，給當前元件繫結一個value屬性。 2、v-model雙向繫結的實現： （1）在父元件內給子元件新增v-model，相當於給元件新增了個value 屬性，傳遞的值就是繫結的值。和繫結了一個此繫結值的input事件。 （2）子元件中使用prop屬性接受這個value值，名字必須是value。 （3）子元件內部更改value值的時候，必須透過$emit（）事件派發個input事件，並攜帶最新的值。 （4）v-model繫結的input事件會自動監聽這個input事件，把接收到的最近新值賦值給v-model繫結的變數。
六、vue的響應式原理
vue3的響應式原理
在Vue2的響應式中，存在著新增屬性，刪除屬性以及直接透過下標修改陣列，但頁面不會自動更新的問題。但是在Vue3中，這些問題都得以解決。
實現原理： 透過Proxy（代理）： 攔截物件中任意屬性的變化，包括：屬性值的讀寫，屬性的增加，屬性的刪除等。
透過Reffect（反射）： 對源物件的屬性進行操作
new Proxy(data,{
//攔截讀取屬性值
get(target, prop){
return Reflect.get(target, prop)
},
//攔截設定屬性值或新增新屬性
set(target, prop, value){
return Reflect.set(target, prop, value)
},
//攔截刪除屬性
deleteProperty(target, prop){
return Reflect.deleteProperty(target, prop)
}
})
proxy
Proxy 物件用於建立一個物件的代理，從而實現基本操作的攔截和自定義（如屬性查詢、賦值、列舉、函式呼叫等）。
被 Proxy 代理虛擬化的物件。它常被作為代理的儲存後端。根據目標驗證關於物件不可擴充套件性或不可配置屬性的不變數（保持不變的語義）。
語法
const p = new Proxy(target, handler)
引數： target： 要使用 Proxy 包裝的目標物件（可以是任何型別的物件，包括原生陣列，函式，甚至另一個代理）。
handler： 一個通常以函式作為屬性的物件，各屬性中的函式分別定義了在執行各種操作時代理 p 的行為。
Vue2中的響應式原理
首先我們先看一下Vue2中的響應式原理，其次我們在過渡到Vue3的響應式原理。
實現Vue2響應式是透過Object.defineProperty()來實現的，同樣使用資料劫持的方法。
let person = {
name:'路飛',
age:18
}
let p = {}
Object.defineProperty(p, "name", {
get(){ //有人讀取name時呼叫
return person.name;
},
set(value){ //有人修改name時呼叫
console.log("有人修改了name屬性")
person.name = value
}
});
Object.defineProperty(p, "age", {
get(){ //有人讀取age時呼叫
return person.age;
},
set(value){ //有人修改age時呼叫
console.log("有人修改了age屬性")
person.age = value
}
});
此時，p物件就完成了對person物件的代理，當讀取p.name時，實際上是在讀取person.name，當修改p.name時，實際上person中name屬性的值也會隨之更新。
但是，在Vue2中，無法透過p物件對person物件進行增和刪的操作，實際上person物件是捕獲不到的，所以即便透過p物件刪除和增加屬性，person物件內的屬性是不會更新的。
七、vue3的元件通訊
1、父子元件間通訊
1、子元件透過 props 屬性來接受父元件的資料，然後父元件在子元件上註冊監聽事件，子元件透過 emit 觸發事件來向父元件傳送資料。
父子：父子元件通訊，父元件將值v-bind繫結傳給子元件，元件使用defineProps接受。利用 watch 函式監聽 props.msg 的變化。每當 msg 的值發生變化時，回撥函式會被觸發，新值 (newVal) 會被推送到 list 陣列中。這意味著每當父元件透過 msg 屬性傳遞一個新的值，這個值就會被新增到子元件的列表中。
子父：子父元件通訊，子元件透過defineEmits(["add1"])建立一個自定義事件，並透過emits("add1",value.value)傳遞資料給父元件。父元件則可以在使用子元件的標籤上透過v-on來監聽這個事件。
2、透過 ref 屬性給子元件設定一個名字。父元件透過 parent 獲得父元件，這樣也可以實現通訊。
3、使用 provide/inject，在父元件中透過 provide提供變數，在子元件中透過 inject 來將變數注入到元件中。不論子元件有多深，只要呼叫了 inject 那麼就可以注入 provide中的資料。
2、跨代元件間通訊
跨代元件間通訊其實就是多層的父子元件通訊，同樣可以使用上述父子元件間通訊的方法，只不過需要多層通訊會比較麻煩。
1、provide / inject——使用 provide/inject，在父元件中透過 provide提供變數，在子元件中透過inject來將變數注入到元件中。不論子元件有多深，只要呼叫了 inject 那麼就可以注入 provide中的資料【無響應性且只能單向通訊（父傳子）】 2、 listeners——具有響應性且可以雙向通訊
使用上述的6種方法的 listeners方法。
3、兄弟元件間通訊
透過 refs 以父元件為中間人來獲取到兄弟元件，也可以進行通訊。
4、任意元件間通訊
1、vuex狀態管理——vuex 的思想就是將這一些公共的資料抽離出來，將它作為一個全域性的變數來管理，然後其他元件就可以對這個公共資料進行讀寫操作，這樣達到了解耦的目的
2、使用 eventBus ，其實就是建立一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。它的本質是透過建立一個空的 Vue 例項來作為訊息傳遞的物件，通訊的元件引入這個例項，通訊的元件透過在這個例項上監聽和觸發事件，來實現訊息的傳遞。
如果業務邏輯複雜，很多元件之間需要同時處理一些公共的資料，這個時候採用上面這一些方法可能不利於專案的維護。這個時候可以使用 vuex ，vuex 的思想就是將這一些公共的資料抽離出來，將它作為一個全域性的變數來管理，然後其他元件就可以對這個公共資料進行讀寫操作，這樣達到了解耦的目的。
八、vuex和pinia的區別
Vuex和Pinia都是Vue.js的狀態管理工具，但它們在設計、使用、功能等方面存在一些區別。以下是它們之間主要區別的詳細比較：
設計和使用 Vuex：採用全域性單例模式，透過一個store物件來管理所有的狀態，元件透過store物件來獲取和修改狀態1。Vuex的設計相對傳統，適合大型和複雜的專案，提供了豐富的功能如模組化、外掛和嚴格模式等12。 Pinia：採用了分離模式，每個元件都擁有自己的store例項，透過在元件中建立store例項來管理狀態1。Pinia的設計更加現代和靈活，旨在提供一種更直觀、更易於使用的方式來管理Vue應用的狀態3。
資料修改 Vuex：包含mutations和actions，mutations用於同步修改狀態，actions用於處理非同步操作2。 Pinia：沒有mutations，只有state、getters和actions1。Pinia的actions可以直接修改狀態，而不需要像Vuex那樣透過mutations來修改狀態。
模組化 Vuex：支援模組化，可以將狀態管理邏輯分割到不同的模組中4。 Pinia：也支援模組化，但每個獨立的倉庫都是透過defineStore生成的，提供了扁平化的結構，有助於更好的程式碼分割1。
語法和使用 Pinia：語法上比Vuex更容易理解和使用，提供了更好的TypeScript支援1。Pinia與Vue 3的Composition API緊密結合，允許將狀態邏輯作為可複用的函式組合起來3。 Vuex：Vuex的語法和用法相對傳統，對於熟悉Vue 2的開發者來說可能更加熟悉4。
體積和效能 Pinia：體積較小，約1KB，且效能較好，因為它使用了新的ES6語法和新的數據處理方式1。 Vuex：體積相對較大，但效能穩定可靠，是Vue.js官方提供的狀態管理庫2。
社羣支援和適用場景 Vuex：是Vue.js官方出品，社羣支援較強，擁有豐富的文件和示例，適合複雜的專案和對狀態管理有更高要求的開發者12。 Pinia：是一個較新的框架，社羣支援相對較弱，但它在Vue 3的Composition API生態中得到了官方支援，更適合初學者和快速開發專案13。
總結 Vuex和Pinia都是Vue.js的狀態管理工具，但它們在設計和使用上存在差異。Vuex是一個更完整的狀態管理庫，提供了豐富的功能和良好的社羣支援，適合大型和複雜的專案。而Pinia則是一個輕量級的狀態管理庫，專注於提供一個簡單的API來管理應用程式的狀態，適合初學者和快速開發專案。在選擇時，可以根據專案的具體需求和使用的Vue版本來決定使用哪一個。
九、如何實現水平垂直居中
這個是css中經常會被面試官問到的問題，有時候面試官還會讓你手寫，大家一定要背出來
情景：兩個方塊，大的包含小的，讓小的水平垂直居中
方法一：定位absolute+translate
給top和left分別一個50%，然後自身再top和left負50%
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
position: relative;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin-top: -100px; */
/* margin-left: -100px; */
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
如果已知寬高的時候也可以不用translate,直接寫成margin-left:-100px和margin-top:-100px.
方法二：定位+margin auto
<style>
.father{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.son{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
<div class="father">
<div class="son"></div>
</div
父級設定為相對定位，子級絕對定位，並且四個定位屬性的值都設定了0，那麼這時候如果子級沒有設定寬高，則會被拉開到和父級一樣寬高
這裏子元素設定了寬高，所以寬高會按照我們的設定來顯示，但是實際上子級的虛擬佔位已經撐滿了整個父級，這時候再給它一個margin:auto它就可以上下左右都居中了。
方法三：彈性佈局flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
display: flex;
justify-content: center;
align-items: center;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
justify-content: center是主軸居中，align-item: center是交叉軸居中
方法四：網格佈局grid
寫法和彈性一模一樣
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
display: grid;
justify-content: center;
align-items: center;
}
.wrap {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div>hhhhhh</div>
</div>
</body>
</html>
方法五：表格佈局table,text-align和vertical-aligin
用表格佈局就需要用上text-align: center來居中，那麼就需要子元素是非塊級元素，所以將子元素設定display: inline-block成為行內塊，表格元素在y軸上居中用vertical-align: middle;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: rgb(28, 101, 164);
display: table-cell;
text-align: center;
vertical-align: middle;
}
.wrap {
display: inline-block;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div>
<div>hhhhhh</div>
</div>
</body>
</html>
文字水平垂直居中text-aligin、line-height
對於文字的水平垂直居中，你可以使用text-align: center和line-height來設定，line-height的引數設定成父容器的高即可
塊級元素僅水平居中 margin: 0 auto
margin: 0 auto常見於僅水平居中塊級元素，無法垂直居中
十、flex彈性佈局怎麼理解？
一、什麼是Flex彈性佈局？ Flex 是 Flexible Box 的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的佈局方式。
引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器透過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
任何一個容器都可以指定為 Flex 佈局。
十一、css中的動畫屬性
1. transition 屬性
transition 屬性用於定義元素從一種樣式逐漸改變為另一種樣式時的效果，通常用於過渡效果。
子屬性：
transition-property：指定哪些 CSS 屬性將受到過渡效果的影響。transition-duration：過渡的持續時間。transition-timing-function：過渡的速度曲線。transition-delay：過渡開始之前的延遲時間。
2. transform 屬性
transform 屬性用於改變元素的位置、尺寸、旋轉等，通常配合 transition 使用。
子屬性：
translate(x, y)：將元素沿 x 軸和 y 軸移動。scale(x, y)：將元素沿 x 軸和 y 軸縮放。rotate(angle)：將元素旋轉指定的角度。skew(x-angle, y-angle)：將元素傾斜指定的角度。matrix(a, b, c, d, e, f)：使用矩陣來定義變換。
3. animation 屬性
animation 屬性用於定義關鍵幀動畫，可以實現更復雜的動畫效果。
子屬性：
animation-name：指定關鍵幀的名稱。animation-duration：動畫的持續時間。animation-timing-function：動畫的速度曲線。animation-delay：動畫開始之前的延遲時間。animation-iteration-count：動畫播放的次數。animation-direction：動畫播放的方向。animation-fill-mode：動畫開始前或結束後元素的狀態。animation-play-state：動畫的播放狀態（播放或暫停）。
4. will-change 屬性
will-change 屬性提示瀏覽器在渲染時最佳化特定屬性的動畫效果。
5. backface-visibility 屬性
backface-visibility 屬性用於控制元素背面是否可見，通常用於3D變換。
6. perspective 屬性
perspective 屬性定義了3D空間的透視效果。
7. transform-origin 屬性
transform-origin 屬性用於定義元素變換的中心點。
8. animation-fill-mode 屬性
animation-fill-mode 屬性定義了動畫開始前和結束後元素的狀態。
9. animation-direction 屬性
animation-direction 屬性定義了動畫播放的方向。
10. animation-play-state 屬性
animation-play-state 屬性定義了動畫的播放狀態（播放或暫停）。
十三、promise
一、什麼是Promise
Promise是抽象非同步處理物件以及對其進行各種操作的元件。Promise本身是同步的立即執行函式解決非同步回撥的問題， 當呼叫 resolve 或 reject 回撥函式進行處理的時候, 是非同步操作， 會先執行.then/catch等，當主棧完成後，纔會去呼叫執行resolve/reject中存放的方法。promise的功能是可以將複雜的非同步處理輕鬆地進行模式化。採用Promise，連續讀取多個檔案，可以解決回撥地獄。如果說到基於JavaScript的非同步處理，我想大多數都會想到利用回撥函式。
Promise本身是同步的立即執行函式， 當在executor中執行resolve或者reject的時候, 此時是非同步操作， 會先執行then/catch等，當主棧完成後，纔會去呼叫resolve/reject中存放的方法執行。
二、ES6 Promises 的API方法
1、引數：Promise建構函式接受一個函式作為引數，其中該引數又接受兩個函式作為它自身的引數，分別是resolve和reject。
new Promise((resolve, reject) => {
//非同步操作
})
promise.then(function(data) {
console.log('success');
}).catch(function(error) {
console.log('error');
});
1.1 resolve
返回一個promise物件成功的狀態，並通知給then方法或catch方法，接下來根據物件的狀態決定走哪條路，然後執行後續操作；resolve方法的作用是把promise物件的狀態從進行中變成已完成，同時可以向resolve方法傳入引數，這個引數會在將來被promise物件的then方法獲取；
1.2 reject
返回一個失敗的promise物件；reject方法也是同樣的道理，只不過是把promise物件狀態變成失敗，同時傳入的引數會被catch方法獲取而已；
當resolve或reject修改promise物件狀態之後，透過檢測promise物件的狀態，決定執行then還是catch回撥方法。在這個過程中：resolve和reject起到的作用是修改物件狀態、通知回撥函式以及傳遞迴調函式可能需要的引數。這樣做的好處就是：把邏輯判斷和回撥函式分開處理；
2、回撥函式 .then 和 .catch
回撥函式的呼叫是根據物件的狀態來完成的：進行中、已完成和失敗**（pending(進行中)**、fullfilled(成功)、rejected(失敗)
2.1 Promise.then
得到非同步任務的正確結果；
只有Promsie內部的狀態落定了，then方法中對應的處理程式纔會執行；
then方法的強大之處，可以鏈式呼叫；
2.2 Promise.catch
進行捕獲和處理失敗結果；
3、方法 .all() 和 .race()
3.1 Promise.all()
併發處理多個非同步任務(等待機制)，所有結果都返回之後，統一列印； 誰跑得慢，以誰爲準執行回撥； Promise.all 接收一個 promise物件的陣列作為引數，當這個陣列裡的所有promise物件全部變為resolve或reject狀態的時候，它纔會去呼叫 .then 方法；
3.2 Promise.race()
併發處理多個非同步任務(賽跑機制)， 任何一個非同步操作完成，就執行下一步的.then；請求圖片的時候使用；
誰跑得快，以誰爲準執行回撥；
十四、http的請求方式
HTTP 的 八大請求方式：GET、 POST、 HEAD、OPTIONS、 PUT、 DELETE、 TRACE、 CONNECT。
一、GET
GET 動作：用於獲取資源，當採用 GET 方式請求指定資源時， 被訪問的資源經伺服器解析後立即返回響應內容。
通常以 GET 方式請求特定資源時， 請求中不應該包含請求體，所有需要向被請求資源傳遞的資料都應該透過 URL 向伺服器傳遞。
二、POST
POST 動作：用於提交資料， 當採用 POST 方式向指定位置提交資料時，資料被包含在請求體中，伺服器接收到這些資料後可能會建立新的資源、也可能會更新已有的資源。
同時 POST 方式的請求體可以包含非常多的資料，而且格式不限。因此 POST 方式用途較為廣泛，幾乎所有的提交操作都可以使用 POST 方式來完成。
雖然用 GET 方式也可以提交資料，但一般不用 GET 方式而是用 POST 方式。在 HTTP協議中，建議 GET 方式只用來獲取資料，而 POST 方式則用來提交資料(而不是獲取資料)。
★ get方式和post方式有何區別
簡單來說，本質上區別： - GET產生 一個 TCP資料包 - POST產生 兩個 TCP資料包 也就是說： 對於GET方式的請求，瀏覽器會把http header和data一併傳送出去，伺服器響應200（返回資料）； 而對於POST，瀏覽器先發送header，伺服器響應100 continue，瀏覽器再發送data，伺服器響應200 ok（返回資料）。
詳細區別： 資料攜帶上:
GET方式：在URL地址後附帶的引數是有限制的，其資料容量通常不能超過1K。 POST方式：可以在請求的實體內容中向伺服器傳送資料，傳送的資料量無限制。 請求引數的位置上:
GET方式：請求引數放在URL地址後面，以 ? 的方式來進行拼接 POST方式:請求引數放在HTTP請求包中 用途上:
GET方式一般用來獲取資料
POST方式一般用來提交資料
首先是因為GET方式攜帶的資料量比較小，無法帶過去很大的數量
POST方式提交的引數後臺更加容易解析(使用POST方式提交的中文資料，後臺也更加容易解決)
GET方式比POST方式要快 GET方式比POST方式要快
更快的原因：
1.post請求包含更多的請求頭 因為post需要在請求的body部分包含資料，所以會多了幾個資料描述部分的首部欄位（如content-type），這其實是微乎其微的。
2.post在真正接受資料之前會先將請求頭髮送給伺服器進行確認，然後才真正傳送資料
post請求的過程：
[1].瀏覽器請求tcp連線（第一次握手）
[2].伺服器答應進行tcp連線（第二次握手）
[3].瀏覽器確認，併發送post請求頭（第三次握手，這個報文比較小，所以http會在此時進行第一次資料傳送）
[4].伺服器返回100 continue響應
[5].瀏覽器開始傳送資料
[6].伺服器返回200 ok響應
get請求的過程：
[1] .瀏覽器請求tcp連線（第一次握手）
[2].伺服器答應進行tcp連線（第二次握手）
[3].瀏覽器確認，併發送get請求頭和資料（第三次握手，這個報文比較小，所以http會在此時進行第一次資料傳送）
[4].伺服器返回200 ok響應
也就是說，目測get的總耗是post的2/3左右
3、get會將資料快取起來，而post不會
4、post不能進行管道化傳輸
所以，在可以使用get請求通訊的時候，不要使用post請求，這樣使用者體驗會更好，當然，如果有安全性要求的話，post會更好。
三、PUT
PUT 動作：用於向指定位置提交資料， 當採用 PUT 方式向指定位置提交資料時， 資料被包含在請求體中， 伺服器接收到這些資料後直接在當前位置(即提交資料時指定的位置) 建立新的資源。
PUT 方式和 POST 方式極為相似，都可以向伺服器提交資料，
PUT 方式通常指定了資源的存放位置(即提交資料時指定的位置)
POST 方式所提交的資料由伺服器決定存放位置(可能是新增資料，也可能是更新資料)。
在 HTTP 規範中，建議 PUT 方式只用來建立新的資源。
四、DELETE
DELETE 動作：用於刪除特定位置的資源。
採用 DELETE 方式訪問特定位置的資源時， 伺服器接受到請求後會刪除當前位置對應的資源。
五、HEAD
HEAD 動作：用於獲取響應頭，採用 HEAD 方式請求指定資源時，被訪問的資源經伺服器解析後立即返回響應，但返回的響應中僅包含狀態行和響應頭，不包含響應體。
HEAD 動作通常 用於完成測試 URI 的有效性、 獲取資源更新時間等操作。
六、TRACE
TRACE 動作：用於回顯伺服器收到的請求，主要用於測試或診斷。
七、OPTIONS
OPTIONS 動作：用於查詢伺服器針對特定資源所支援的 HTTP 請求方式，即詢問客戶端可以以那些方式來請求相應的資源， 同時使用 OPTIONS 方式也可以用來測試伺服器的效能。
八、CONNECT
CONNECT 動作：要求在與代理伺服器通訊時建立隧道， 實現用隧道協議進行 TCP 通訊。主要使用 SSL（安全套接層）和 TLS（傳輸層安全） 協議把通訊內容加密後經網路隧道傳輸。
十五、http常見的狀態碼
HTTP狀態碼表示客戶端HTTP請求的返回結果、標記伺服器端的處理是否正常或者是出現的錯誤，能夠根據返回的狀態碼判斷請求是否得到正確的處理很重要。
1. 資訊響應（1xx）
這類狀態碼錶示請求已被接收，需要繼續處理。
100 繼續（Continue）：伺服器已經收到了部分請求，但需要客戶端繼續傳送剩餘的部分。
101 切換協議（Switching Protocols）：伺服器將遵照客戶端的請求切換協議。
102 處理（Processing）：這是一個 WebDAV 請求狀態碼，表示處理將在非同步模式下繼續。
103 早期提示（Early Hints）：伺服器希望客戶端繼續傳送請求，但已經在響應中提前提供了某些提示資訊。
2. 成功（2xx）
這類狀態碼錶示請求已成功被伺服器接收、理解，並接受了。
200 OK：請求已成功，請求所希望的響應頭或資料體將隨此響應返回。
201 Created：請求已成功，需要在返回的響應中附帶一個新的資源的 URI，如果有新建資源的話。
202 Accepted：伺服器已接受請求，但尚未處理。
203 Non-Authoritative Information：請求已成功處理，但返回的資訊可能來自另一來源。
204 No Content：伺服器成功處理了請求，但沒有返回任何內容。
205 Reset Content：伺服器成功處理了請求，但沒有返回任何內容，並要求客戶端重置表單域。
206 Partial Content：伺服器成功處理了部分 GET 請求。
207 Multi-Status：多狀態響應（多個狀態行）。
208 Already Reported：已報告（WebDAV）。
226 IM Used：IM 已使用（WEBDAV）。
3. 重定向（3xx）
這類狀態碼錶示需要客戶端採取進一步的操作才能完成請求。
300 Multiple Choices：目標資源有多個位置可供選擇，並且位置已在響應的 Location 欄位資訊中返回；使用者代理或使用者必須選擇一個位置，然後再次發出 GET 請求。
301 Moved Permanently：請求的資源已永久移動到新位置，並且將來任何對此資源的引用都應該使用本次響應中給出的 URI。
302 Found：請求的資源現在臨時從不同的 URI 響應請求。由於這樣的重定位是臨時的，因此客戶端應當繼續使用本次響應中提供的 URI 傳送未來的請求。
303 See Other：對應的資源可以透過另一個 URI 被找到，並且應當使用 GET 方法檢索此資源。
304 Not Modified：自從上次請求後，請求的資源並未修改過。因此，可以繼續使用此快取版本。
305 Use Proxy：請求的資源必須透過指定的代理才能被訪問。
307 Temporary Redirect：請求的資源現在臨時從不同的 URI 響應請求。由於這樣的重定位是臨時的，因此客戶端應當繼續使用本次響應中提供的 URI 傳送未來的請求。
308 Permanent Redirect：請求的資源現在永久從不同的 URI 響應請求。
4. 客戶端錯誤（4xx）
這類狀態碼錶示請求包含語法錯誤或無法完成。
400 Bad Request：伺服器無法理解請求的格式。
401 Unauthorized：請求要求使用者的身份認證。
403 Forbidden：伺服器理解請求客戶端的請求，但是拒絕執行此請求。
404 Not Found：請求的資源不存在。
405 Method Not Allowed：請求的方法不允許對請求的目標資源執行。
406 Not Acceptable：請求的資源的內容特性無法滿足請求頭中的條件，因而無法生成響應實體。
408 Request Timeout：請求超時。
409 Conflict：請求的資源狀態衝突。
410 Gone：請求的資源在伺服器上已經不再可用，而且沒有任何已知的轉發地址。
411 Length Required：伺服器要求在請求報文中包含表示報文長度的 Content-Length 頭部。
412 Precondition Failed：伺服器在驗證請求頭中的條件時失敗。
413 Payload Too Large：請求實體太大。
414 URI Too Long：請求的 URI 太長。
415 Unsupported Media Type：請求的格式不受伺服器支援。
416 Range Not Satisfiable：請求的範圍不符合要求。
417 Expectation Failed：伺服器未能滿足期望請求。
418 I'm a teapot：一個幽默的狀態碼，表示裝置是茶壺，無法沖泡咖啡。
422 Unprocessable Entity：請求格式正確但無法被完成。
429 Too Many Requests：使用者傳送了太多請求，在一定時間內被限流。
451 Unavailable For Legal Reasons：因法律原因不可用。
5. 伺服器錯誤（5xx）
這類狀態碼錶示伺服器在處理請求的過程中發生了錯誤。
500 Internal Server Error：伺服器遇到了未曾預料的情況，無法完成對請求的處理。
501 Not Implemented：伺服器不支援當前請求所需的功能。
502 Bad Gateway：作為閘道器或代理工作的伺服器從上游伺服器收到了無效的響應。
503 Service Unavailable：伺服器暫時無法使用（由於超載或停機維護）。
504 Gateway Timeout：作為閘道器或代理工作的伺服器從上游伺服器等待響應請求的時間太長。
505 HTTP Version Not Supported：伺服器不支援請求中所使用的 HTTP 協議版本。
506 Variant Also Negotiates：由透明內容協商協議產生的錯誤。
507 Insufficient Storage：伺服器無法儲存完成請求所需的完整內容（WebDAV）。
508 Loop Detected：伺服器檢測到無限迴圈重定向（WebDAV）。
510 Not Extended：進一步擴充套件的工作被永久停止。
511 Network Authentication Required：需要網路認證才能獲得請求的響應。
