前端三剑客——javascript-fetchAPI

大纲：

1.初识fetch请求

用Promise处理fetch异步请求

用Async/await处理fetch异步请求

发起除GET请求时第二个参数的配置

2.Response对象

属性

方法

3.函数封装fetch请求

调用封装函数格式

封装后fetch请求格式

初识fetch请求

用Promise处理fetch异步请求

用Async/await处理fetch异步请求

//接口地址:     http://ajax-base-api-t.itheima.net/api/getbooks

//fetch函数（异步操作）只有一个参数默认向服务器发送GET请求
/**
 * fetch发起GET请求的异步操作格式
 * fetch(URL)
 * 若只有一个参数（URL）则是发送GET请求,且返回的是Promise对象
 * 若想查具体的内容url后面加:  ?key1=value&key2=value
 *
 *
 * 真正拿到数据过程:
 * 先等请求出结果（拿到Response），在等响应体解析（反序列化），最终拿到能用的js数据---全过程靠2次Promise等待实现：   即对应的2次.then()或者2次await
 *
 * 首先fetch请求（得到Promise对象）.then()/await得到Response对象
 * 再Response对象.json()进行响应体解析（反序列化）得到Promise对象
 * 然后在.then()/await得到可用的js数据
 *
 * Response对象.json():读取str(原始JSON格式数据)+JSON.parse(str)
 */

// //测试一(用Promise处理异步操作)
fetch('http://ajax-base-api-t.itheima.net/api/getbooks').then(res => res.json()).then(res=>console.log(res))

//测试二(用Async/await处理异步操作)
async function getData(){
    //用fetch函数发起GET请求
    //发请求从服务器获取数据
    let result = await fetch('http://ajax-base-api-t.itheima.net/api/getbooks?id=2')
    //将获取的数据进行对应的解析
    let json =  await result.json()
    console.log(json);
}
getData()

发起除GET请求时第二个参数的配置

//fetch函数（异步操作）为其设置第二个参数向服务器发送指定请求
/**
 * 给fetch配置第二个参数用来定义发起的  HTTP请求(请求行，请求头，请求体)
 * 格式
 * fetch(url,{
 *     method:'请求方式'
 *     headers:{
 *         ‘Content-Type’:'数据格式'        //向服务器说明请求体中数据格式（请求体一般将数据转换为JSON格式后发给服务器）
 *     }
 *     body:'请求体数据'
 * })
 */

//测试一
async function addbook() {
    const data = {bookname: 'n1', author: 'nn', publisher: 'nn'}
    //调用fetch函数发起HTTP请求（POST），并接收Response对象
    let res = await fetch('http://ajax-base-api-t.itheima.net/api/addbook', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    //对响应结果数据进行数据解析
    let json = await res.json()
    console.log(json)
}
addbook()

Response对象

// Response对象（了解）
// 用fetch()发起请求会得到Promise对象，只要服务器成功接受请求并且返回了HTTP响应（无论状态码是成功2xx还是错误4xx/5xx）fetch返回的Promise对象都会兑现为Response对象（即.then()）
// 发起HTTP请求如果中间断网，则服务器不能接收到请求且无法返回HTTP响应

/**
 * Response对象的属性
 * .ok:             返回布尔类型表示请求是否成功
 * .status:         返回数字表示HTTP响应的状态码
 * .statusText:     返回文本形式的状态描述
 * .url:            返回请求的url地址
 *
 *
 * Response对象常见的方法
 * 根据服务器返回的不同数据类型，提供了不同方法
 * 最常见的方法:    Response对象.json():      将服务器返回的JSON格式字符串解析为js中的数据类型
 */

//测试一
async function getBooks(){
    let res = await fetch('http://ajax-base-api-t.itheima.net/api/getbooks');
    console.log(res);
    console.log(res.ok);                //Response对象
    console.log(res.status);            //200
    console.log(res.statusText);        //OK
    console.log(res.url);               //http://ajax-base-api-t.itheima.net/api/getbooks
}
getBooks()

函数封装fetch请求

////对fetch函数发起请求的过程进行函数的封装
/**
 * 理解：
 * 将fetch请求封装到http函数中，利用解包操作得到对应的url method params（具体的请求要查询/删除参数，利用封装好的函数将会自动拼接到url后） data（要添加/修改/删除的内容）
 * 避免发起不同请求时重复写fetch请求格式，直接调用封装好的函数
 * js中对象解包不是按顺序接收，而是按属性接收
 *
 * 封装时url路径拼接参数方法:
 *
 * 简单键值对（如 { name: 'a', age: 18 }）：可以用 URLSearchParams 转换
 * new URLSearchParams():
 * {key1:value,key2:value}-->key1=value$key2&value
 * new URLSearchParams().toString():
 * 将参数转换成:  key1=value$key2&value且变成字符串形式,便于再url后进行'?'和其的拼接
 *
 * 复杂键值对（如 { ids: [1,2,3], user: { id: 1 } }）：不推荐直接用 URLSearchParams
 * 建议先把属性值转为 JSON 字符串传递，后面再进行:new URLSearchParams().toString()
 * 如果是DELETER请求删除多个数据 其可选择是params（转换后拼接到url后）或者data（body: JSON.stringify(data)）
 *
 * 调用已经封装好了http函数（用fetch发起请求）
 * 如果是method:'DELETE请求删除多个数据 其可选择是params（转换后拼接到url后）或者data（body: JSON.stringify(data)）
 *
 * //GET/DELETE
 *http({
 *     url:‘xxx’,
 *     method:'xxx',
 *     params(可选，若要查询某个具体的信息则写):{}
 *})
 * //POST/PUT/PATCH/DELETE
 * http({
 *    url:‘xxx’,
 *    method:'xxx',
 *    data:{}
 * })
 *
 */

用函数封装fetch请求-外部js文件

//用函数封装fetch请求
async function http(obj) {
    //js中对象解包不是按顺序接收，而是按属性接收
    let {url, method='GET', params, data} = obj;

    //如果有params则先处理url:     url?key1=value&key2=value
    if (params) {
        let str = new URLSearchParams(params).toString();
        url += '?' + str;
    }

    //根据是否有data来设置第二个参数格式
    try {
        let res = undefined;
        if (data) {
            //如果有body则是发起DELETE/POST/PUT/PATCH请求
            res = await fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data)
            })
        } else {
            //没有则是发起GET/未带body而是url拼接params的DELETE请求
            res = await fetch(url,{method:method})
        }
        if(!res.ok) {
            throw new Error(`${method},${url}失败:${res.status},${res.statusText}`);
        }
        return res;
    }catch(err) {
        throw err;
    }
}

<script src="http.js"></script>



async function look() {
    try {
        let res = await http({
            method: 'GET',
            url: 'http://ajax-base-api-t.itheima.net/api/getbooks'
        });
        let json = await res.json()
        console.log(json);
    } catch (err) {
        console.log(err)
    }
}
look()

//测试二
async function add() {
    try {
        let res = await http({
            method: 'POST',
            url: 'http://ajax-base-api-t.itheima.net/api/adddbook',
            data: {
                bookname: 'n1',
                author: 'nn',
                publisher: 'nn'
            }
        })

        let json = await res.json()
        console.log(json)
    } catch (err) {
        console.log(err)
    }
}
add()

函数（http函数）封装fetchAPI

https://blog-static.cnblogs.com/files/blogs/853151/http.js?t=1762874469&download=true

此随笔代码笔记

blog-static.cnblogs.com/files/blogs/853151/代码笔记.js?t=1762915425&download=true

posted @ 2025-11-12 10:48 guohan 阅读(12) 评论(0) 收藏举报

刷新页面返回顶部

前端三剑客——javascript-fetchAPI

公告