fetch

fetch

什么是 fetch ？

• Fetch 被称之为下一代 Ajax 技术，内部采用 Promise 方式处理数据

• API 语法简洁明了，比 XMLHttpRequest 更简单易用

• 采用模块化设计，API 分散多个对象中（如：Response对象、Request对象、Header对象）

• 通过数据流（Stream对象）处理数据，可以分块读取，有利于提高网站性能，对于大文件或者网速慢的场景极为有用

兼容性

• 不兼容 IE

使用 fetch 发送基本 get 请求

• 默认发送 get 请求，返回 Response 对象

语法

fetch(url)
 .then(...)
 .then(...)
 .catch(...)

实例：

fetch('url')
.then(res => {
   //res 为Response 对象，需要通过特定方法获取其中内容
   //res.json() 是一个异步操作，表示取出所有内容，转为JSON对象并返回
   return res.json()
}).then(json => {
    //输出
    console.log(json)
})

优化：

async function getData() {
    try{
       let res = await fetch('url')
       let json = await res.json()
    } catch (err){
       console.log(err)
    }
}

Response 对象

属性	含义
res.ok	返回一个布尔型，表示是否请求成功
ress.status	表示HTTP回应的状态码
res.statusText	返回状态码的文本信息（‘ok’）
res.url	返回请求的url地址

fetch 常见方法

方法	含义
res.json()	获得 JSON 对象
res.text()	得到文本字符串
res.blob()	得到二进制 blob 对象
res.formData()	得到 FromData 表单对象
res.arrayBuffer()	得到二进制 ArryBuffer 对象

fetch 配置参数

fetch 的第一个参数是 url ，此外还可以接收第二个参数，作为配置对象，自定义发送的HTTP请求

fetch(url, {
   method: '',
   heqaders:{
      'Content-type': '数据格式：application/json'
   },
   body: '请求体数据'
})

fetch 发送 post 请求

基本语法：

发送的内容格式：

1. json 格式：‘application/json’
2. x-www-form-urlencoded 格式：‘application/x-www-form-urlencoded; charset=UTF-8’
3. formData 格式

async function add(obj) {
   let res = await fetch('url', {
       method: '',
       headers: {
           'Content-type': 'application/json'
       },
       body: JSON.stringify(obj)
   })
   
   let json = await res.json()
   return json
}

fetch 函数封装

目标效果：

http({
    method: '',
    url: '',
    params:{...}
})

http({
    method: '',
    url: '',
    data:{...}
})

封装后：

async function http(obj) {
    //对象解构赋值
    let {method, url, params, data} = obj
    
    if (params) {
        let UrlStr = new URLSearchParams(params).toString()
        url += '?' + UrlStr
    }
    
    let res
    
    if (data) {
        res = await fetch(url, {
            method: method,
            headers: {
            'Contents-Type': 'application/json'
            },
            body: JSON.stringify(data)                  
        })
    }else {
        res = await fetch(url)
    }
    return res.json()
}

fetch 的缺点：

fetch 只对网络的请求报错，对 400 ， 500 都当作成功的请求

ajax 实现了 局部数据刷新
本身是针对MVC的编程,多用于jquery项目，不符合现在前端MVVM的浪潮

axios
基于ajax封装
为MVVM框架而生 (vue react)
支持 Promise API
支持并发请求

fetch
AJAX在ES6的替代品
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
兼容性差