Vue框架之fetch

◆ fetch基本使用：

• Fetch API是新的ajax解決方案 Fetch會返回Promise
• fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。

fetch(url, options).then(）

示例：

  <script type="text/javascript">
    /*
      Fetch API 基本用法
      	fetch(url).then()
     	第一個參數請求的路徑   Fetch會返回Promise   所以我們可以使用then 拿到請求成功的結果 
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法屬於fetchAPI的一部分，它返回一個Promise實例對象，用於獲取後臺返回的數據
      return data.text();
    }).then(function(data){
      //   在這個then裏面我們能拿到最終的數據  
      console.log(data);
    })
  </script>

◆ fetch API中的HTTP請求：

• HTTP協議，它給我們提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
• 默認的是 GET 請求
• 需要在 options 對象中 指定對應的請求使用的方法
• post請求的時候需要在options中設置請求頭headers和body

<script type="text/javascript">
        /*
              Fetch API 調用接口傳遞參數
        */
       #1.1 GET參數傳遞 - 傳統URL  通過url  ？ 的形式傳參 
        fetch('http://localhost:3000/books?id=123', {
            	# get 請求可以省略不寫 默認的是GET 
                method: 'get'
            })
            .then(function(data) {
            	# 它返回一個Promise實例對象，用於獲取後臺返回的數據
                return data.text();
            }).then(function(data) {
            	# 在這個then裏面我們能拿到最終的數據  
                console.log(data)
            });

      #1.2  GET參數傳遞  restful形式的URL  通過/ 的形式傳遞參數  即  id = 456 和id後臺的配置有關   
        fetch('http://localhost:3000/books/456', {
            	# get 請求可以省略不寫 默認的是GET 
                method: 'get'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #2.1  DELETE請求方式參數傳遞      刪除id  是  id=789
        fetch('http://localhost:3000/books/789', {
                method: 'delete'
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       #3 POST請求傳參
        fetch('http://localhost:3000/books', {
                method: 'post',
            	# 3.1  傳遞數據 
                body: 'uname=lisi&pwd=123',
            	#  3.2  設置請求頭 
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

       # POST請求傳參
        fetch('http://localhost:3000/books', {
                method: 'post',
                body: JSON.stringify({
                    uname: '張三',
                    pwd: '456'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });

        # PUT請求傳參     修改id 是 123 的 
        fetch('http://localhost:3000/books/123', {
                method: 'put',
                body: JSON.stringify({
                    uname: '張三',
                    pwd: '789'
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(function(data) {
                return data.text();
            }).then(function(data) {
                console.log(data)
            });
    </script>

◆ fetchAPI 中的響應格式

• 用fetch來獲取數據，如果響應正常返回，我們首先看到的是一個response對象，其中包括返回的一堆原始字節，這些字節需要在收到後，需要我們通過調用方法將其轉換爲相應格式的數據，比如JSON，BLOB或者TEXT等等

/*
      Fetch響應結果的數據格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  將獲取到的數據使用 json 轉換對象
      return data.text(); //  //  將獲取到的數據 轉換成字符串 
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })