fetch 如何請求數據

時間 2019-11-25

標籤 fetch 如何請求數據简体版

原文原文鏈接

一序言

在傳統Ajax 時代，進行 API 等網絡請求都是經過XMLHttpRequest或者封裝後的框架進行網絡請求,然而配置和調用方式很是混亂，對於剛入門的新手並不友好。今天咱們介紹的Fetch提供了一個更好的替代方法，它不只提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源，並且能夠很容易地被其餘技術使用，例如 Service Workers。
javascript

二與Ajax對比

使用Ajax請求一個 JSON 數據通常是這樣：java

var xhr = new XMLHttpRequest(); xhr.open('GET', url/file,true); xhr.onreadystatechange = function() { if(xhr.readyState==4){ if(xhr.status==200){ var data=xhr.responseText; console.log(data); } }; xhr.onerror = function() { console.log("Oh, error"); }; xhr.send();

一樣咱們使用fetch請求JSON數據：node

fetch(url).then(response => response.json())//解析爲可讀數據 .then(data => console.log(data))//執行結果是 resolve就調用then方法 .catch(err => console.log("Oh, error", err))//執行結果是 reject就調用catch方法

從二者對比來看，fetch代碼精簡許多，業務邏輯更清晰明瞭，使得代碼易於維護，可讀性更高。
總而言之，Fetch 優勢主要有：ios

1. 語法簡潔，更加語義化，業務邏輯更清晰git

2. 基於標準 Promise 實現，支持 async/awaites6

3. 同構方便，使用isomorphic-fetchgithub

三 Promise簡介

因爲 Fetch API 是基於 Promise 設計，接下來咱們簡單介紹下Promise工做流程，方便你們更好理解Fetch。ajax

fetch方法返回一個Promise對象, 根據 Promise Api 的特性, fetch能夠方便地使用then方法將各個處理邏輯串起來, 使用 Promise.resolve() 或 Promise.reject() 方法將分別返會確定結果的Promise或否認結果的Promise, 從而調用下一個then 或者 catch。一旦then中的語句出現錯誤, 也將跳到catch中。typescript

四請求常見數據格式

接下來將介紹如何使用fetch請求本地文本數據，請求本地JSON數據以及請求網絡接口。其實操做相比與Ajax，簡單不少！npm

//HTML部分
  <div class="container"> <h1>Fetch Api sandbox</h1> <button id="button1">請求本地文本數據</button> <button id="button2">請求本地json數據</button> <button id="button3">請求網絡接口</button> <br><br> <div id="output"></div> </div> <script src="app.js"></script>

1.fetch請求本地文本數據

本地有一個test.txt文檔，經過如下代碼就能夠獲取其中的數據，而且顯示在頁面上。

document.getElementById('button1').addEventListener('click',getText); function getText(){ fetch("test.txt") .then((res) => res.text())//注意：此處是res.text() .then(data => { console.log(data); document.getElementById('output').innerHTML = data; }) .catch(err => console.log(err)); }

2.fetch請求本地JSON數據

本地有個posts.json數據，與請求本地文本不一樣的是，獲得數據後還要用forEach遍歷,最後呈如今頁面上。

document.getElementById('button2').addEventListener('click',getJson); function getJson(){ fetch("posts.json") .then((res) => res.json()) .then(data => { console.log(data); let output = ''; data.forEach((post) => { output += `<li>${post.title}</li>`; }) document.getElementById('output').innerHTML = output; }) .catch(err => console.log(err)); }

3.fetch請求網絡接口

獲取https://api.github.com/users中的數據，作法與獲取本地JSON的方法相似,獲得數據後，一樣要通過處理

document.getElementById('button3').addEventListener('click',getExternal); function getExternal(){ // https://api.github.com/users fetch("https://api.github.com/users") .then((res) => res.json()) .then(data => { console.log(data); let output = ''; data.forEach((user) => { output += `<li>${user.login}</li>`; }) document.getElementById('output').innerHTML = output; }) .catch(err => console.log(err)); }

1、fetch

　　fetch是一種XMLHttpRequest的一種替代方案，在工做當中除了用ajax獲取後臺數據外咱們還可使用fetch、axios來替代ajax

2、安裝

　　執行npm install whatwg-fetch --save便可安裝。

　　爲了兼容老版本瀏覽器，還須要安裝npm install es6-promise --save

3、fetch的基本使用

npm install whatwg-fetch --save
npm install es6-promise --save
import 'es6-promise'
import 'whatwg-fetch'

fetch(url,options).then((res)=>{
  console.log(res);
},function(err){
  console.log(err)
})

說明：

一、fetch的返回值是一個promise對象

二、options

method:HTTP請求方式，默認是GET

   body:請求的參數

        fetch('/xxx', {

               method: 'post',

               body:'username=zhangsan&age=17'

 

       });

headers:HTTP請求頭

由於通常使用JSON數據格式，因此設置ContentType爲application/json

credentials:默認爲omit,忽略的意思，也就是不帶cookie還有兩個參數，same-origin，意思就是同源請求帶cookie；include,表示不管跨域仍是同源請求都會帶cookie

三、在.then裏面第一個回調函數中處理response

status(number): HTTP返回的狀態碼，範圍在100-599之間

statusText(String): 服務器返回的狀態文字描述

headers: HTTP請求返回頭

body: 返回體，這裏有處理返回體的一些方法

text(): 將返回體處理成字符串類型

json()：返回結果和 JSON.parse(responseText)同樣

blob()：返回一個Blob，Blob對象是一個不可更改的類文件的二進制數據

若是請求一個XML格式文件，則調用response.text。若是請求圖片，使用response.blob方法

注意：

　　cookie傳遞必須在header參數裏面加上credentials: 'include'，纔會如xhr同樣將當前cookies帶到請求中去

4、get、post請求方式

　　一、get

var result = fetch('url', {
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
        },    
 });

　　二、post

var result = fetch('/api/post', {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 注意 post 時候參數的形式
        body: "a=100&b=200"
    });

5、封裝get和post方法

　　一、get

import 'es6-promise'
import 'whatwg-fetch'

export default (url)=>({
    var result = fetch(url, {
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
        },    
   })
   .then(res=>res.json());
   
   return result
})

　　二、post

import 'es6-promise'
import 'whatwg-fetch'
import qs from 'qs';
export default (url,data)=>({
    var result = fetch(url, {
        method: 'POST',
        credentials: 'include',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        // 注意 post 時候參數的形式
        body: qs(data)
    })
    .then(res=>res.json())
    
    return result;
})

6、fetch與axios的區別

axios("http://xxx/xxx.json？a=123'").then((res)=>{
     console.log(res)//這裏的r是響應結果
})

fetch("http://www.baidu.com").then((res)=>{
        console.log(res);//是一個綜合各類方法的對象，並非請求的數據
})

fetch返回的是一個未處理的方法集合，咱們能夠經過這些方法獲得咱們想要的數據類型。若是咱們想要json格式，就執行response.json(),若是咱們想要字符串就response.text()

axios

一、從瀏覽器中建立 XMLHttpRequest

二、從 node.js 發出 http 請求

三、支持 Promise API

四、攔截請求和響應

五、轉換請求和響應數據

六、自動轉換JSON數據

七、客戶端支持防止CSRF/XSRF

fetch:

符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏

更加底層，提供的API豐富（request, response）