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(函数：数据)

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文件：

后端代码

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

结果

post请求(2)(json格式)

后端代码

@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/',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)
    })