vue学习--前端交互(三、接口调用-fetch用法)

1 fetch概述

1.1 基本特性

  • 更加简单的数据获取方式，可以看做是XMLHttpRequest的升级版
  • 基于Promise实现

1.2 语法结构

fetch(url).then(fn2)
              .then(fn3)
              ...
              .catch(fn)

2 fetch的基本用法

fetch('/abc').then(data=>{
   return data.text();
}).then(ret=>{
   // 注意这里得到的才是最终数据
   console.log（ret）
}）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
  <script type="text/javascript">
    /*
      Fetch API 基本用法
    */
    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      console.log(data);
    })
  </script>
</body>
</html>

3 fetch 请求参数

3.1 常用配置选项

  • method（String）：HTTP请求方法，默认为GET
  • body（String）：HTTP的请求参数
  • headers（Object）：HTTP的请求头，默认为0
fetch('/abc',{
   method:'get'
}).then(data=>{
   return data.text();
}).then(ret=>{
   // 注意这里得到的才是最终的数据
   console.log(ret)
})

3.2 Get请求传递参数

3.3 Delete请求传递参数

3.4 Post请求传递参数

3.4 Put请求传递参数

  <script type="text/javascript">
    /*
      Fetch API 调用接口传递参数
    */
 
    // GET参数传递-传统URL
    // fetch('http://localhost:3000/books?id=123', {
    //   method: 'get'
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });
 
    // GET参数传递-restful形式的URL
    // fetch('http://localhost:3000/books/456', {
    //   method: 'get'
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });
 
    // DELETE请求方式参数传递
    // fetch('http://localhost:3000/books/789', {
    //   method: 'delete'
    // })
    //   .then(function(data){
    //     return data.text();
    //   }).then(function(data){
    //     console.log(data)
    //   });
 
    // POST请求传参
    // fetch('http://localhost:3000/books', {
    //   method: 'post',
    //   body: 'uname=lisi&pwd=123',
    //   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请求传参
    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>

fetch响应结果

响应数据格式

  • text()：将返回体处理成字符串类型
  • json()：返回结果和JSON.parse(responseText)一样
<script type="text/javascript">
    /*
      Fetch响应结果的数据格式
    */
    fetch('http://localhost:3000/json').then(function(data){
      // return data.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)
    })
  </script>
posted @   一纸年华  阅读(41)  评论(0)  编辑  收藏  举报  
相关博文：
· vue学习--前端交互(一、交互模式)
· vue学习--前端交互(二、Promise用法)
· fetch的基本用法
· fetch 基本使用
· fetch
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示

目录导航

1 fetch概述
1.1 基本特性
1.2 语法结构
2 fetch的基本用法
3 fetch 请求参数
3.1 常用配置选项
3.2 Get请求传递参数
3.3 Delete请求传递参数
3.4 Post请求传递参数
3.4 Put请求传递参数
fetch响应结果