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

fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
fetch(url, options).then(）

url:就是访问的url地址

options：JSON格式，包含：访问时的方式，请求头(json格式)，请求体等

fetch(url, options)返回Promise对象

fetch基本使用：
格式：
fetch('url')
.then(函数：返回Promise对象)
.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>

<script>
        fetch('http://127.0.0.1:5000/get_category').then(function(data){
            console.log(data)       //Reponse请求内容
            return data.text()        //返回一个promise对象然后.then,进行处理
            }).then(function(data){
                console.log('thenthen')      
                console.log(data)  //输出服务器返回的内容
            })
    </script>

fetchAPI中的http请求

HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
默认是get请求
当请求方法不是get时，需要在 options 对象中指定对应的 method - method:请求使用的方法
post 和普通请求的时候需要在options 中设置请求头 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请求

那么重点说post请求，有两种方式，不同的地方就是options中的body的格式和header不同：

字符串格式
JSON格式

post请求(1)(发送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

结果

post请求(2)(json格式)

    <script>
        let person = {
            username:'zhangsan',
            age:33
        }
        fetch('http://localhost:5000/add_personJson', {
            method: 'post',
            body: JSON.stringify(person),        //把json对象转化为字符串类型(前后端数据交互都是以字符串形式)
            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'])

结果：

restful请求

不再是请求的url上id.后缀，而是直接输入id，在后台进行处理.
在url后加上id例如:

http://localhost:5000/add_personJson/123

123就是id
在服务器端的app路由中加上

@app.route('/add_personJson/<string:pid>',methods=['POST'])
def add_personJson(pid)
        #对pid进行操作

得到的pid就是访问url时传递的参数，通过这个参数进行操作。

fetchAPI 中响应格式

用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等.
当在第一个then中使用data.text()时，转为string类型，直接在第二个then方法中使用data即可，不能再调用data.uname等属性。但是可以通过JSON.parse(data)把字符串转为JSON对象，进行调用。
当使用data.json()时，转为json类型，在后边可直接使用属性调用，如data.uname等。


    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();   //  将获取到的数据使用 json 转换对象
      return data.text(); //  //  将获取到的数据 转换成字符串 ,新的Promise对象
    }).then(function(data){
      #json
      console.log(data.uname,data.age,data.gender)
      #text
      console.log(data)
    })