2020-04-13--Vue之前后端交互4--fetch

fetch

Fetch API是新的ajax解決方案 Fetch會返回Promise
fetch不是ajax的進(jìn)一步封裝蔬啡，而是原生js，沒有使用XMLHttpRequest對象血久。
fetch(url, options).then(）

url:就是訪問的url地址

options：JSON格式，包含：訪問時的方式帮非，請求頭(json格式)氧吐，請求體等

fetch(url, options)返回Promise對象

fetch基本使用：
格式：
fetch('url')
.then(函數(shù)：返回Promise對象)
.then(函數(shù)：數(shù)據(jù))

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

<script>
        fetch('http://127.0.0.1:5000/get_category').then(function(data){
            console.log(data)       //Reponse請求內(nèi)容
            return data.text()        //返回一個promise對象然后.then,進(jìn)行處理
            }).then(function(data){
                console.log('thenthen')      
                console.log(data)  //輸出服務(wù)器返回的內(nèi)容
            })
    </script>

fetchAPI中的http請求

HTTP協(xié)議筑舅，它給我們提供了很多的方法，如POST庄岖，GET豁翎，DELETE，UPDATE隅忿，PATCH和PUT
默認(rèn)是get請求
當(dāng)請求方法不是get時心剥，需要在 options 對象中指定對應(yīng)的 method - method:請求使用的方法
post 和普通請求的時候需要在options 中設(shè)置請求頭 headers 和 body
delete請求：

fetch('http://localhost:5000/books/789', {
        method: 'delete'
    })
        .then(function(data) {
            return data.text();
        }).then(function(data) {
        console.log(data)
    });

put請求與delete一致，不做解釋背桐。

POST請求

那么重點(diǎn)說post請求优烧，有兩種方式，不同的地方就是options中的body的格式和header不同：

字符串格式
JSON格式

post請求(1)(發(fā)送form表單的字符串字符串格式)

在vscode中新建html文件：

<script>
        fetch('http://localhost:5000/add_person', {
        method: 'post',
        body: 'username=lisi&age=123',
        headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
        }
    })
    .then(function(data) {
        return data.text();
    }).then(function(data) {
        console.log(data)
    });
    </script>

后端代碼

@app.route('/add_person',methods=['POST'])
def add_person():
    username = request.form['username']
    age = request.form['age']
    return username+':'+age

結(jié)果

post請求(2)(json格式)

    <script>
        let person = {
            username:'zhangsan',
            age:33
        }
        fetch('http://localhost:5000/add_personJson', {
            method: 'post',
            body: JSON.stringify(person),        //把json對象轉(zhuǎn)化為字符串類型(前后端數(shù)據(jù)交互都是以字符串形式)
            headers: {'Content-Type': 'application/json'}
        })
        .then(function(data) {
            return data.text();
        })
        .then(function(data) {
            console.log(data)
    });
    </script>

后端代碼

@app.route('/add_personJson',methods=['POST'])
def add_personjson():
    jsonobj = request.json
    return jsonobj['username']+':'+str(jsonobj['age'])

結(jié)果：

restful請求

不再是請求的url上id.后綴链峭，而是直接輸入id畦娄，在后臺進(jìn)行處理.
在url后加上id例如:

http://localhost:5000/add_personJson/123

123就是id
在服務(wù)器端的app路由中加上

@app.route('/add_personJson/<string:pid>',methods=['POST'])
def add_personJson(pid)
        #對pid進(jìn)行操作

得到的pid就是訪問url時傳遞的參數(shù)，通過這個參數(shù)進(jìn)行操作。

fetchAPI 中響應(yīng)格式

用fetch來獲取數(shù)據(jù)熙卡，如果響應(yīng)正常返回杖刷，我們首先看到的是一個response對象，其中包括返回的一堆原始字節(jié)驳癌，這些字節(jié)需要在收到后滑燃，需要我們通過調(diào)用方法將其轉(zhuǎn)換為相應(yīng)格式的數(shù)據(jù)，比如JSON颓鲜，BLOB或者TEXT等等.
當(dāng)在第一個then中使用data.text()時表窘，轉(zhuǎn)為string類型，直接在第二個then方法中使用data即可甜滨，不能再調(diào)用data.uname等屬性乐严。但是可以通過JSON.parse(data)把字符串轉(zhuǎn)為JSON對象，進(jìn)行調(diào)用衣摩。
當(dāng)使用data.json()時昂验，轉(zhuǎn)為json類型，在后邊可直接使用屬性調(diào)用昭娩，如data.uname等凛篙。


    /*
      Fetch響應(yīng)結(jié)果的數(shù)據(jù)格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  將獲取到的數(shù)據(jù)使用 json 轉(zhuǎn)換對象
      return data.text(); //  //  將獲取到的數(shù)據(jù) 轉(zhuǎn)換成字符串 ,新的Promise對象
    }).then(function(data){
      #json
      console.log(data.uname,data.age,data.gender)
      #text
      console.log(data)
    })

最后編輯于：2020.05.08 12:56:34

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

禁止轉(zhuǎn)載黍匾，如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者栏渺。