[Axios] FETCH中的基础语法

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

 

参考简书

 

使用Fetch发送请求

GET/HEAD等请求不能设置BODY

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

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('获取地址').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);
});

 

POST请求

fetch('post获取地址', {
    method: 'POST',
    //BODY中只支持字符串(GET请求还无法设置BODY)
    body: 'a=1&b=2'
}).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);
})