曾經(jīng)的我們是那么的年少。然鵝，時光荏苒，歲月如梭，一代新人換舊人。我們已經(jīng)三十出頭，成為了程序員中的大哥。

　　現(xiàn)如今，互聯(lián)網(wǎng)界瞬息萬變，最新技術(shù)層出不窮。Vue、Axios、React、Redux、Angular、Node...等等等等。萬幸的是，底層的東西是不變的。所以，我們今天就來聊一聊，那些底層的東西。

　　說起AJAX，相信大多數(shù)程序員都會本能的想起XMLHttpRequest。沒錯，XHR(小黃人)陪伴我們度過了許多歲月。但是，小黃人誕生的歲月，處于互聯(lián)網(wǎng)的原始階段。

　　各大瀏覽器你方唱罷我登場，并沒有一個統(tǒng)一的Web標(biāo)準(zhǔn)。所以在今天看來，小黃人的設(shè)計顯得較為混亂。曾經(jīng)一度被我們使用的jQuery(這也是一個大哥)幫助我們進(jìn)行了合理的封裝。解決了我們的使用上的煩惱。但想要使用jQuery，我們就必須引入一個比較大的文件，這對于僅僅想要使用jQuery來進(jìn)行發(fā)送ajax的我們來說并不十分友好。

　　于是，在日新月日的今天，瀏覽器也順應(yīng)潮流，增加了新的原生方式: fetch

　　fetch是瀏覽器對AJAX的另一種原生支持方式(非XMLHttpRequest)。提供了一種更合理，更簡單的方式來異步獲取數(shù)據(jù)。

　　它是基于Promise的，所以目前不了解Promise的同學(xué)，請先查閱相關(guān)文檔

　　二、發(fā)送GET請求

　　2.1 發(fā)送

　　想要發(fā)送請求，非常簡單：一個最簡單的發(fā)送請求的方式

fetch('/api/getMessage')

　　來看一下network面板：

　　請求成功!

　　查看詳情

　　發(fā)送請求，完成！

　　一切就是這么的簡單......

　　2.2 接收數(shù)據(jù)

　　接收數(shù)據(jù)：

fetch('/api/getMessage')

    .then(res => res.json())

    .then(data => console.log(data))

　　調(diào)用fetch之后得到的結(jié)果是一個Promise實例。所以可以調(diào)用then方法進(jìn)行狀態(tài)監(jiān)聽。

　　就像平時我們說人很厲害，會說：

　　這里的處理也分為兩次：

　　第一次決定返回的格式 (第一把刷子...)

　　第二次才是真正的接收數(shù)據(jù) (第二把...)

　　在第一個then函數(shù)中，我們通過return返回了一個 res.json()

　　這個代碼的意思是將返回回來的數(shù)據(jù)處理成JSON格式

　　之所以要return是因為res.json()的結(jié)果依舊是一個Promise實例。

　　在第二個then函數(shù)中，我們可以得到上一個then函數(shù)處理之后的結(jié)果。

　　注意第一個then中其實可以調(diào)用的方法有很多，比如res.text()、res.blob()等，這里不再贅述，請看下文

　　三、發(fā)送POST請求

　　3.1 發(fā)送請求

　　發(fā)送POST請求的方式與發(fā)送GET請求的方式類似，不過要多一個配置參數(shù)

fetch('/api/postMessage', {

  method: 'post'

})

　　第一個參數(shù)依然表示URL

　　第二個參數(shù)是一個對象

　　配置它的method屬性，可以發(fā)送POST請求。

　　network面板：

　　請求首行信息：

　　3.2 接收數(shù)據(jù)

　　同樣的，我們依然要通過兩次then方法來處理并接收數(shù)據(jù)

fetch('/api/postMessage', {

  method: 'post'

})

  .then(function (res) {

    return res.json()

  })

  .then(function (data) {

    console.log(data)

  })

　　返回內(nèi)容：

　　至此我們已經(jīng)學(xué)會了如何通過fetch發(fā)送基本的get與post請求。接下來我們要更加深入的去掌握更多的fetch使用方法

　　四、攜帶數(shù)據(jù)

　　發(fā)送請求時，有時我們需要攜帶一些數(shù)據(jù)

　　這些數(shù)據(jù)可以根據(jù)請求類型的不同而放在不同的位置。

　　· GET請求的數(shù)據(jù)放在URL的QueryString部分

　　· POST請求的數(shù)據(jù)攜帶在請求正文中

　　4.1 GET請求攜帶數(shù)據(jù)

　　最簡單的方式就是在拼接字符串的時候把查詢串放在URL上。

　　fetch('/api/getMessage?a=1&b=2&c=3')

　　那么請求時，就會攜帶在上面了。

　　但是這種方式會使我們在發(fā)送請求時不得不拼接字符串。如果字段比較多，會是一件很麻煩的事情。

　　此時我們可以通過 URLSearchParams 來實現(xiàn)

　　4.2 URLSearchParams

　　這是一個URL的Search部分參數(shù)的構(gòu)造函數(shù)。簡單來說就是生成查詢字符串的。

　　語法：

　　var query = new URLSearchParams([init]);

　　參數(shù)init(可選):

　　1. 字符串

　　2. 二維數(shù)組

　　3. 對象(推薦)

　　字符串：

var search = '?a=1&b=2&c=3';

var querystring = new URLSearchParams(search);

var str = querystring.toString();

console.log(str)

　　輸出：

　　二維數(shù)組：

var arr = [

  ['a', 1],

  ['b', 2],

  ['c', 3],

  ['d', 4],

  ['e', 5]

]

var querystring = new URLSearchParams(arr);

var str = querystring.toString();

console.log(str)

　　輸出:

　　現(xiàn)在，我們可以通過URLSearchParams這種方式來獲取對應(yīng)的參數(shù)，這樣就可以快速生成查詢串

　　4.3 POST請求攜帶數(shù)據(jù)

　　POST請求的數(shù)據(jù)攜帶在請求正文中。我們需要設(shè)置fetch的第二個參數(shù)的body屬性。

　　body的屬性值可以是以下任意類型之一： 我們這里只演示字符串的情況

　　1. ArrayBuffer

　　2. ArrayBufferView (Uint8Array等)

　　3. Blob/File

　　4. string

　　5. URLSearchParams

　　6. FormData

　　body的值是字符串

fetch("/api/postMessage", {

  method: 'post',

  body: JSON.stringify({

    a: 1,

    b: 2,

    c: 3

  }),

  headers: {

    "content-type": 'application/json'

  }

})

　　請求正文內(nèi)容：

　　至此，我們已經(jīng)討論了通過fetch函數(shù)進(jìn)行GET請求與POST請求的發(fā)送與攜帶數(shù)據(jù)。fetch是原生瀏覽器自帶的方法。不需要再編寫XHR請求或依賴jQuery 。

　　如有疏漏，敬請指正。更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。