• 原生js，基于Promise，不涉及ajax

• 存在于window上恤磷，window.fetch

• XMLHttpRequest的替代品

參數(shù)

• 請(qǐng)求地址

• 請(qǐng)求配置對(duì)象弧轧，選填，可填屬性如下碗殷，主要關(guān)注method精绎，header，body

• 參考

• method 字符串锌妻，請(qǐng)求方式代乃，默認(rèn)GET

• header 對(duì)象，請(qǐng)求頭

• body 請(qǐng)求體內(nèi)容仿粹，類型與請(qǐng)求頭里的Content-Type匹配

• mode 字符串搁吓，請(qǐng)求模式，有以下三種

  • cors 默認(rèn)值吭历，會(huì)在請(qǐng)求頭中加入origin和referer

  • no-cors 不會(huì)在請(qǐng)求頭中加入origin和referer堕仔，跨域時(shí)可能出現(xiàn)問題

  • same-origin 請(qǐng)求必須在同一個(gè)域中，跨域則會(huì)報(bào)錯(cuò)

• credentials 如何攜帶憑據(jù)cookie晌区，有以下三種

  • omit 默認(rèn)值摩骨，不攜帶cookie

  • same-origin 請(qǐng)求同源地址時(shí)攜帶cookie

  • include 請(qǐng)求任何地址都攜帶cookie

• cache 配置緩存模式

  • 參考

返回值

• 返回值為一個(gè)Promise對(duì)象

  • 收到服務(wù)器返回結(jié)果后，無論服務(wù)器返回的是什么結(jié)果朗若，該Promise都會(huì)進(jìn)入resolved狀態(tài)恼五，

  • 當(dāng)網(wǎng)絡(luò)發(fā)生錯(cuò)誤，服務(wù)器未能返回?cái)?shù)據(jù)時(shí)哭懈，該Promise進(jìn)入rejected狀態(tài)

• 該Promise對(duì)象的resolve函數(shù)的參數(shù)為一個(gè)Response對(duì)象灾馒，可使用await直接拿到，屬性如下

  • 參考

  • ok 當(dāng)響應(yīng)的狀態(tài)碼在200-299之間遣总，則為true睬罗，否則為false

  • status 響應(yīng)狀態(tài)碼

  • 以下方法均為異步，所以可配合await使用旭斥，因?yàn)?Responses 對(duì)象被設(shè)置為了 stream 的方式容达，所以它們只能被讀取一次，也就是說這些方法只能執(zhí)行一次

  • text() 處理文本格式的Ajax響應(yīng)琉预，拿到一個(gè)被解析為 USVString 格式的 Promise 對(duì)象

  • json()處理JSON格式的Ajax響應(yīng)董饰，拿到一個(gè)被解析為JSON格式的 Promise 對(duì)象

  • blob() 處理二進(jìn)制格式文件的Ajax響應(yīng)，例如圖片圆米，電子表格等卒暂，拿到一個(gè)被解析為Blob格式的 Promise 對(duì)象

  • redirect() 重定向至另一個(gè)URL，她會(huì)創(chuàng)建一個(gè)新的Promise娄帖，來解決重定向的URL響應(yīng)

來顆栗子

• 假設(shè)請(qǐng)求一切順利

async function getData() {
    const url = "xxxx";

    const result = await fetch(url)  fetch執(zhí)行完會(huì)返回一個(gè)Promise對(duì)象P1也祠，該P(yáng)romise對(duì)象的resolve函數(shù)的參數(shù)為一個(gè)Response對(duì)象
        .then((response) => {  通過參數(shù)拿到該Response對(duì)象
            response = response.json();  處理
            return response;  返回
        })  then執(zhí)行結(jié)束返回了一個(gè)新的Promise對(duì)象P2
        .then((resp) => {  P2的resolve函數(shù)的參數(shù)為P1的resolve函數(shù)的返回值response
            return resp.data;  返回要拿到的數(shù)據(jù)
        });  then執(zhí)行結(jié)束又返回了一個(gè)新的Promise對(duì)象P3
        await拿到P3的resolve函數(shù)的參數(shù)，也就是P2的resolve函數(shù)的返回值resp.data

    return result;
}

Request

• new Request(請(qǐng)求地址近速，請(qǐng)求配置)

• 除了通過傳入請(qǐng)求地址和請(qǐng)求配置對(duì)象的方式诈嘿，還可以通過直接傳入一個(gè)Request對(duì)象的方式來使用fetch

• 而實(shí)際上使用第一種方式時(shí)堪旧，fetch內(nèi)部就是為我們創(chuàng)建了一個(gè)Request對(duì)象

文件上傳

• 流程

  • 客戶端將文件數(shù)據(jù)發(fā)送給服務(wù)器

  • 服務(wù)器保存上傳的文件數(shù)據(jù)至服務(wù)器端

  • 服務(wù)器響應(yīng)給客戶端一個(gè)文件的訪問地址

• 請(qǐng)求方式：由于文件一般都比較大，所以使用POST

• 請(qǐng)求的表單格式：multipart/form-data

• 請(qǐng)求體中需傳入的鍵值對(duì)：鍵為服務(wù)器要求名稱奖亚，值為文件數(shù)據(jù)

• 一般通過HTML5提供的FormData來構(gòu)建請(qǐng)求體

  • const formData = new FormData();

  • formData.append("img", inp.file[0]); 添加鍵值對(duì)