fetch及使用方式

什么是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}
性别:
${sex}
等级:
${level}
总额:
${sum}`
) }) }) }) }) </script>

你可能感兴趣的:(javascript)