ajax - Githubissues

wdatsd commented 3 years ago

Fetch

向服务器发送请求一般为三种 XMLHttpRequest(XHR),jQuery中的AJAX，Fetch

AJAX和Fetch 他们两个类似是新的API 他的目的是代替AJAX

浏览器js内置的API不用引入

他可以实现客户端和服务器的信息通信他是异步的

Fetch是ES2018规范中新增的API，所有浏览器支持度是很好(可以基于BABEL的最新语法解析包，把其进行解析解析变成AJAX让不兼容Fetch的浏览器能运行)，想要兼容好一点的用fetch polyfill（这个也是转换成AJAX）

Fetch API也是基于promise设计的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    fetch('http://127.0.0.1:8848/',{//配置项
        method:'post',//请求方法 默认为get   值为字符串
        body:'a=1&b=2',//请求数据  值为字符串(不能写对象)     get/head方式的请求是不允许有body的,这两个请求只能自己去url里拼
        headers:{//请求头  默认为{}   值为对象
            'Content-Type':'x-www-form-urlencoded'
        },
        credentials:'include' //include意思是无论是跨域还是同源都带cookie    默认为omit   值为字符串
    }).then(result => {
        console.log(result);
        //成功返回的结果中
        //headers:{}包含响应头信息   redirected:false 是否重定向
        //status:状态码   type:'basic'/'cors'     url：请求的地址
        //__proto__:Response他里面有arrayBuffer()  blob()  json()  text()基于这些方法可以快速的吧从服务器获得的结果找到
        return result.text();
        //text()方法是数据fetch的一部分，他返回一个promise对象，用于获得浒苔返回的数据

    })
    //不管服务器返回的状态码是多少 Fetch都不认为是失败的(哪怕是4跟5开头的状态码)，得自己做处理
</script>
</html>

fetch自己检测请求失败

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
<script src="../node_modules/axios/dist/axios.js"></script>
<script>
    //不管服务器返回的状态码是多少 Fetch都不认为是失败的(哪怕是4跟5开头的状态码)，得自己做处理
    fetch('http://127.0.0.1:8848/').then(result => {
        let {status} = result;//获得相应回来的状态码 自己抛出
        if(/^(4|5)\d{2}$/.test(status)){
            throw new Error('query data is rror');
            return;
        }
        return result.json();//没有异常就将内容json格式化 传给下一个then
        //经过这个判断 只有我们认为成功的才能执行下面的内容
    }).then(result => {
        console.log(result);
    }).catch(msg => {//因为自己做了一定条件下回抛出异常 所有catch就有触发的可能了
        console.log(msg);
    });
    //post请求的跟默认get差不多  只是加上配置项
</script>
</html>

fetch响应结果

text():将返回体处理成字符串类型

json():返回结果和JSON.parse(responseText)一样,就是json对象

fetch('/url').then(data => {
    //return data.text();
    return data.json();
}).then(result => {
    console.log(result)
})

wdatsd commented 3 years ago

d啊

wdatsd commented 3 years ago

sad

wdatsd commented 3 years ago

就经济命脉

wdatsd commented 3 years ago

萨达

wdatsd commented 3 years ago

萨达

wdatsd commented 3 years ago

fetch

wdatsd / workHouse

ajax #5

Fetch

fetch自己检测请求失败

fetch响应结果