fetch及使用方式

最新推荐文章于 2024-04-25 18:03:26 发布

小宇宙chris_310

最新推荐文章于 2024-04-25 18:03:26 发布

阅读量1.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_38796823/article/details/88210120

版权

javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

什么是fetch

fetch，说白了，就是XMLHttpRequest的一种替代方案。除了XMLHttpRequest对象来获取后台的数据之外，还可以使用一种更优的解决方案fetch。

fetch的使用方法

fetch(url,init).then(function(response) { } )
fetch参数说明：
①　 fetch接收两个参数，第一个为地址且必填，第二个为配置对象可选。
②　如果是简单的无参数get请求，那么可以不要第二个参数（默认为get请求）,当然也可以加上来对此fetch进行一些说明
③　第二个参数包含请求类型，发送数据，headers，模式等
④　fetch方法返回的也是一个promise对象,我们只能使用then来获取返回数据，
⑤　我们需要两次then才能对后台返回得到数据进行处理，在第一个then里面return result.text(), 或者 return result.json(), 然后第二个参数里面才能真正的获取到返回的具体值，并且对其进行逻辑处理
⑥　如果要判断请求是否失败，那么请在第一次的then里面判断，那里面为请求数据对象。
注意：fetch发送post请求的时候，要在请求参数中加上一个请求头。。。否则就会报错。

headers: {
                    "Content-Type": "application/json"
                }

使用fetch连续发起多次请求

如果要使用fetch发起多次请求，那么从第二次开始我们就要把每次的then方法执行后的promise 对象返回。

案例

<body>
    用户名：<input type="text" value="admin">
    密码：<input type="password" value="12345">
    <button type="button">登陆</button><br>
    <div></div>
</body>
<script src="./jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('button').on('click', function () {
            // 第一次发起请求
            let username = $('input:text').val()
            let password = $('input:password').val()
            var dataObj = {
                method: "post",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    username: username,
                    password: password
                })
            }
            let res = fetch('http://127.0.0.1:8081/login', dataObj).then(function (data) {
                return data.json()
            })
                .then(function (data) {
                    return data;
                })

            // 第二次发起请求
            let res1 = res.then(function (data) {
                let username = data.username;
                return fetch('http://127.0.0.1:8081/getInf?username=' + username).then(function (data) {
                    return data.json()
                })
                    .then(function (data) {
                        console.log(data)
                        return data;
                    })
            })

            // 第三次发起请求
            let res2 = res1.then(function (data) {
                console.log(data)
                let level = data.level;
                let name = data.name;
                let sex = data.sex;
                fetch('http://127.0.0.1:8081/getSum?level=' + level).then(function (data) {
                    return data.json()
                })
                    .then(function (data) {
                        let sum = data.sum;
                        $('div').append(`名字：${name}<br>性别：${sex}<br>等级：${level}<br>总额：${sum}`)
                    })
            })
        })
    })
</script>

小宇宙chris_310

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
fetch及使用方式

什么是fetchfetch，说白了，就是XMLHttpRequest的一种替代方案。除了XMLHttpRequest对象来获取后台的数据之外，还可以使用一种更优的解决方案fetch。fetch的使用方法fetch(url,init).then(function(response) { } )fetch参数说明：①　 fetch接收两个参数，第一个为地址且必填，第二个为配置对象可选。②　...
复制链接

扫一扫