fetch 学习和小实践

发表于 | 分类于

fetch 简单介绍

选自：MDN https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

Fetch API提供了一个获取资源的接口(包括跨网络)。可以看做是XMLHttpRequest的替代品

兼容性

兼容性

fetch API

语法

Promise | Response fetch(input[, init]);

init
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalFetch/fetch

基本概念及用法

Fetch 提供了对Request和Response对象的通用定义，可以结合service worker 、Cache API、又或是自定义的响应方式。

Fetch 提供了一个Javascript接口，用来访问和操纵HTTP管道部分。提供了全局的fetch方法
,相比于XML，他可以结合CORS进行跨域

fetch默认情况下不会从服务端发送或接受任何cookies，如果站点依赖用户session，会导致未经认证的请求。（要发送 cookies，必须设置 credentials 选项）

let myImage = document.querySelector('img');
fetch('flowers.jpg')
// fetch接受一个请求地址，返回一个response的promise对象
.then(function(response) {
    // 通过blob拿到二进制内容
    return response.blob();
})
.then(function(myBlob) {
    let objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
});

请求参数
Fetch接受第二个参数，一个可以控制的init的对象

// 生成一个http头
var myHeaders = new Headers();
var myInit = { method: 'GET',
               headers: myHeaders, //请求头
               mode: 'cors',
               cache: 'default' };
fetch('flowers.jpg',myInit)
    .then(function(response) {
        return response.blob();
    })
    .then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        myImage.src = objectURL;
    });

检测请求是否成功

如果遇到网络故障，fetch()promise会带上reject。生成一个TypeError对象。可以通过catch拿到

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

实战操作，将后台登陆模块替换为fetch

将目前公司后台登陆校验相关的逻辑用promise+fetch重构了一下

顺便记录一下爬坑心得

// 注意，fetch默认是不携带cookie的，如果不配置credentials,就无法拿到cookies，所以一直登陆不上去
fetch(me.Api.SigninUrl, {
        method: 'POST',
        headers: {
            // 注意头部必须加上这个，才能确保参数正确传输到服务器端。默认的头不是这个
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        credentials: "include",
        body: me.$form.serialize(),
    })
    .then(response => {
        // 这边拿到是原始response对象，方便我们这边做错误捕捉
        if (response.ok && response.status === 200) {
            return response.json()
        }
    })
    .then(data => {
        let status = data.Status
        let info = data.Data
        me.updateCaptcha()
        me.$submit.prop('disabled', false).text("登录");
        if (status === 0 && info.captcha) {
            toastr.error(me.message.captcha);
        } else if (status === 101) {
            toastr.error(me.message.error)
        } else if (status === 0 && info.Id > 0) {
            // 全部通过校验
            me.redirectBack(info);
        }
    })
    .catch(error => {
        console.log(error)
        toastr.error(me.message.server_err)
    })
0%