fetch的介绍与运用

 介绍

        Fetch API 提供了一个获取资源的接口（包括跨域请求），用于取代传统的xhr(XMLHttpRequest)的，在 JavaScript 脚本里面发出 HTTP 请求。

        基于promise的设计，返回的是Promise对象

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

这是一个基础的fetch接口使用方式，fetch注重分离式的模式，就是将一个复杂的事情分成多个步骤；如上代码，fetch发起请求，成功后会返回一个 Stream 对象（表示服务器访问成功），这个对象使用json()方法反序列化成对象并包装成一个pendding状态的promise，再处理这个promise，获取数据（表示数据能够访问）

response.text()：得到文本字符串，用于获取文本数据，比如 HTML 文件。
response.json()：得到 JSON 对象。
response.blob()：得到二进制 Blob 对象，例如读取图片文件，显示在网页上。
response.formData()：得到 FormData 表单对象，主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。
response.arrayBuffer()：得到二进制 ArrayBuffer 对象，主要用于获取流媒体文件。

 使用

export function get(url, params) {
    if (params) {
        let paramsArray = [];
        //拼接参数  
        Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
        if (url.search(/\?/) === -1) {
            url += '?' + paramsArray.join('&')
        } else {
            url += '&' + paramsArray.join('&')
        }
    }
    return new Promise((resolve, reject) => {
        fetch(url, {
                method: 'GET',
            })
            .then((response) => response.json())
            .then((data) => {
                resolve(data)
            }, err => {
                reject(err)
            })
            .catch((error) => {
                console.log(error)
            })
    })
}