学习记录——Fetch

1. fetch基本使用

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

/*
  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);
    });

2. fetch API中的HTTP请求

• fetch(url, options).then()
• HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
  • 默认的是GET请求
  • 需要在options对象中，指定对应的method：请求使用的方法
  • post和普通请求的时候，需要在options中设置请求头headers和body

2.1 GET

(1) 传统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);
    });

(2) restful形式的URL

fetch('http://localhost:3000/books/456', {
    // get 请求可以省略不写 默认的是GET
    method: 'get',
})
    .then(function (data) {
        return data.text();
    })
    .then(function (data) {
        console.log(data);
    });

2.2 DELETE

删除id是789的数据

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

2.3 POST

(1) body为字符串

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);
    });

(2)body为JSON对象

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);
    });

2.4 PUT

body为JSON对象

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);
    });

3. fetchAPI中响应格式

用fetch来获取数据，如果响应正常返回，首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如JSON，BLOB或者TEXT等等。

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);
    });

4. 关注分离的设计思想

try {
    const response = await fetch(`/api1/search/users2?q=${keyWord}`);
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.log('请求出错', error);
}

---

📘📘欢迎在我的博客上访问：
https://lzxjack.top/