[Axios] ----FETCH的基本语法_fetch 语句-优快云博客

本文深入讲解了FETCH API的基本语法和使用方法，包括GET和POST请求的发送，如何处理响应结果及异常情况，展示了如何通过FETCH实现客户端与服务器端的信息通信。

FETCH的基本语法

基本了解

FETCH不是AJAX，它诞生的目的是为了代替AJAX，它是JS中内置的API：基于FETCH可以实现客户端和服务器端的信息通信

FETCH是Es2018规范中新增的API，所以浏览器的支持度不是特别好（可以基于BABEL的最新语法解析包，把其进行解析），想要兼容性好一些，需要使用“fetch polyfill”
使用FETCH发送请求

GET/HEAD等请求不能设置BODY

fetch的GET请求

fetch('get获取地址', {
    method: 'GET',
    headers: {
        //设置请求头
        'content-type': 'x-www-form-urlencoded'
    },
    //不管同源还是跨域请求都带着COOKIE信息
    credentials: 'include'
}).then(result => {
    console.log(result);
})

result

结果说明

headers：{} 包含响应头信息
redirected：false 是否重定向
status：状态码
statusText
type：‘basic’/‘cors’(基本/同源)
url：请求的地址
__ proto __:Response
- arrayBuffer()
- blob()
- json()
- clone()
- text()
- 基于这些方法可以快速的把从服务器获取的结果找到

注意！！！不管服务器返回的状态是多少，FETCH都不认为是失败（哪怕是4或者5开头的状态码）,都执行的是THEN中的方法（需要我们自己进行异常抛出处理）

GET请求自己抛出异常处理

如果没有任何错误的话，他会返回success

如果出现错误的话，他会返回我们抛出的自定义异常

fetch('获取地址').then(result => {
    let {status} = result;
    //手动抛出异常
    if (/^(4|5)\d{2}$/.test(status)) {
        throw new Error('query data is error!');
        return;
    }
    //转换格式
    return result.json();
    //成功路线
}).then(result => {
    console.log(result);
    //失败路线
}).catch(msg => {
    console.log(msg);
});

fetch的post请求

fetch('https://www.easy-mock.com/mock/5f589cbcd5906660c22db195/example/upload',{
    method:'POST',
    body:'a=1&b=2' //BODY中只支持字符串（get不能设置body）
}).then(result=>{
    
    let{status}=result;
    if(/^(4|5)\d{2}$/.test(status)){
        throw new Error('query data is error')
        return
    }
    return result.json();

}).then(result=>{
    console.log(result)
}).catch(msg=>{
    console.log(msg)
})