手寫promise封裝axios

其實喷户，axios本身就是基于Promise進(jìn)行封裝的吼拥，我們之所以進(jìn)行二次封裝臂聋，主要是為了能夠?qū)﹀e誤信息進(jìn)行一個集中的處理事镣，根據(jù)不同的錯誤信息，需要給用戶不同的提示古劲，以便于給用戶一個良好的操作體驗斥赋。
封裝方法有很多種，基于class類的产艾，基于構(gòu)造函數(shù)的疤剑，也可以直接封裝一個函數(shù)。
具體按照個人習(xí)慣闷堡，最主要的還是要對后端給我們返回的狀態(tài)碼或者狀態(tài)值進(jìn)行判斷隘膘，如果成功，則直接resolve數(shù)據(jù)杠览，否則的話弯菊，對不同的錯誤信息做出不同的操作即可。

封裝方法

/**
 * @function request 二次封裝ajax請求函數(shù)
 * @param {Object} options 對象形式配置參數(shù)
 * @param {String} options.url 請求路徑
 * @param {String} [options.method=GET] 請求方式
 * @param {Object|String} [options.params] GET請求攜帶數(shù)據(jù)
 * @param {Object|FormData} [options.data] POST請求攜帶數(shù)據(jù)
 * @param {Object} [options.headers] 請求頭
 * @return {Promise}
 * */
function request(options) {
    const defaultOptions = {
        method: 'GET',
    };
    options = Object.assign(defaultOptions, options);
    return new Promise((resolve, reject) => {
        axios(options).then(res => {
            // 此處對后臺返回的狀態(tài)值進(jìn)行二次判斷踱阿，可能是狀態(tài)碼管钳，也可能是狀態(tài)值
            // 根據(jù)實際項目不同，后端人員不同软舌，返回的值不同
            if(res.data.success) {
                resolve(res.data);
            // 否則的話是錯誤狀態(tài)蹋嵌，后端人員會給一個錯誤信息
            // 我們需要針對不同的錯誤執(zhí)行不同的操作，給用戶不同的提示
            }else if(res.data.msg) {
                // 執(zhí)行操作
            }
        }).catch(err => {
            // 如果錯誤的話葫隙，直接返回錯誤
            // 也可以對錯誤進(jìn)行一些處理
            reject(err);
        })
    })
}

調(diào)用方法

request({
    url: 'http://www.haochenguang.cn',
    method: 'get',
}).then(res => {
    // 接收返回成功的結(jié)果
}).catch(err => {
    // 接收返回失敗的結(jié)果
})

詳述前端性能優(yōu)化的手段

前端優(yōu)化的目的

1. 優(yōu)化可以使頁面加載的更快栽烂，用戶體驗更加流暢，提升用戶體驗度恋脚。
2. 優(yōu)化可以有效的減少帶寬腺办，減少HTTP請求，減輕服務(wù)器壓力糟描，節(jié)省資源怀喉。

優(yōu)化方式

從HTTP請求方面優(yōu)化

1. 合并壓縮CSS樣式；
2. 合并壓縮JS文件船响；
3. 使用Sprites雪碧圖躬拢；
4. 使用base64格式的圖片躲履，將圖片內(nèi)嵌到頁面中；
5. 圖片懶加載
6. JS文件放置在body底部或者異步加載聊闯；
7. 對JS文件實行懶加載工猜；
8. 將CSS文件放置在head內(nèi)，保證用戶體驗菱蔬；
9. 避免多頁面之間的重復(fù)資源引用篷帅；
10. 減少不必要的HTTP跳轉(zhuǎn)或重定向；
11. 使用CDN來代替本地靜態(tài)資源拴泌；
12. 使用gzip壓縮魏身。

從代碼方面優(yōu)化

1. 避免在document上直接進(jìn)行頻繁的DOM操作
2. 使用classname代替大量的內(nèi)聯(lián)樣式修改
3. 對于復(fù)雜的UI元素，設(shè)置position為absolute或fixed
4. 盡量使用css動畫
5. 使用requestAnimationFrame代替setInterval操作
6. 適當(dāng)使用canvas
7. 盡量減少css表達(dá)式的使用
8. 使用事件代理
9. 避免圖片或者frame使用空src
10. 在css屬性為0時蚪腐，去掉單位
11. 禁止圖像縮放
12. 正確的css前綴的使用
13. 移除空的css規(guī)則
14. 對于css中可繼承的屬性箭昵，如font-size，盡量使用繼承回季，少一點(diǎn)設(shè)置
15. 縮短css選擇器家制，多使用偽元素等幫助定位

image

更加詳細(xì)的優(yōu)化解析：
前端性能優(yōu)化常用總結(jié)
前端性能優(yōu)化方法總結(jié)

瀏覽器輸入網(wǎng)址回車發(fā)生了什么

簡潔回答：

1. DNS 解析:將域名解析成 IP 地址
2. TCP 連接：TCP 三次握手
3. 發(fā)送 HTTP 請求
4. 服務(wù)器處理請求并返回 HTTP 報文
5. 瀏覽器解析渲染頁面
6. 斷開連接：TCP 四次揮手

關(guān)于瀏覽器輸入網(wǎng)址回車后發(fā)生了什么這兩篇文章寫的特別好，我就不獻(xiàn)丑了茧跋。
從URL輸入到頁面展現(xiàn)到底發(fā)生什么？
從輸入url到頁面展示到底發(fā)生了什么@小四

列舉你知道的瀏覽器內(nèi)核

如果本文對您有幫助卓囚，可以看看本人的其他文章:
前端常見面試題（十七）@郝晨光
GitHub創(chuàng)建項目并添加協(xié)作者@郝晨光
TypeScript入門學(xué)習(xí)@郝晨光

結(jié)言

感謝您的查閱瘾杭，本文由郝晨光整理并總結(jié)，代碼冗余或者有錯誤的地方望不吝賜教哪亿；菜鳥一枚粥烁，請多關(guān)照