axiosfetch 并不是一个东西,axios 是基于 promise 的一个网络请求库,我自己是非常喜欢用的。而 fetch 是一个标准(实验中的),chrome 最新浏览器(只说最新的)可以直接使用 fetch 进行网络请求。

一、 fetch 使用示例

fetch MDN 地址:

示例:

<body>
    <img src="https://p.ssl.qhimg.com/dmfd/200_200_100/t015d0e3a102a93a5c5.jpg" alt="">    
</body>
<script>
    let imgUrl = 'http://static.ptbird.cn/01/theme/avatar.jpg?ver=12312';
    fetch(imgUrl).then(res=>{return res.blob()}).then(value=>{
        let url = URL.createObjectURL(value);// 构建url
        document.querySelector('img').src=url;
    });
</script>

上面的示例中,直接使用了 fetch 进行请求,并且拿到了图片。

  • return res.blob() blob 是 response 的一个方法,初次之外还有如 json() 之类的方法,用来获取不同类型的数据。

    • 其他方法: arrayBuffer()blob()json()text()formData()
  • URL.createObjectURL(value) 是将 blob 转 url 的操作。

二、fetch 自定义请求参数

fetch(url,init) 有两个参数,第一个参数是 url,第二个是请求的初始参数,是一个对象:

let myHeaders= new Headers();
let init = {
    method:'POST',
    headers:myHeaders,
    mode:'cors',
    cache:'default'
};
fetch(url,init).then().catch();

三、Headers 请求头

请求头使用的是 Header 对象或者是类。

定义请求头如下: 既可以使用 append 追加 也可以直接传入对象参数

var content = "Hello World";
var myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", content.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": content.length.toString(),
  "X-Custom-Header": "ProcessThisImmediately",
});

Header 自带几个实用的方法用于追加、删除、遍历、存在性判断等:

1.jpg

四、Response 对象

response 对象实际上是 fetch 在决议了 promise 之后返回的对象。

常见的方法和属性如下:

2.jpg

其中 headers 就是一个 Headers 对象,比较常用的:

  • Response.ok : 判断请求是否完成。(主要是判断 HTTP 状态码范围是否是 200-299 这个范围,返回一个 boolean 值)

MDN 解释如下: 如果遇到网络故障,fetch() promise 将会 reject,带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功,需要包含 promise resolved 的情况,此时再判断 Response.ok 是不是为 true

  • Response.status : 状态码
  • Response.statusText : 与状态码相关的文本值

Body

Request 和 Response 都可能包含 body 对象,是下面任意类型的实例:

  • ArrayBuffer
  • ArrayBufferView(Unit8Array and friends)
  • Blob/File
  • string
  • URLSearchParams
  • FormData

而 Request 和 Response 中实现了 Body 实用的方法用于获取不同类型的 body 内容:

  • arrayBuffer()
  • blob()
  • json()
  • text()
  • formData()

五、注意

实验中的功能,原生 fetch 除了新的 chrome/firefox/opera 外其他桌面浏览器都未实现,所有的移动端浏览器都未实现