$.ajax vs axios vs fetch

• Ajax 是什么？

答：Ajax是一种能够在浏览器和服务器之间使用异步数据传输（HTTP请求）的技术。使用它可让页面请求少许的数据，而不用刷新整个页面。而传统的页面（不使用Ajax）要刷新部份内容，必须重载整个网页页面。

• Ajax 基于什么？

答：它基于的是XMLHttpRequest（XHR）。这是一个比较粗糙的API，不符合关注分离的设计原则（Separation of Concerns），配置和使用都不是那么友好。

• $.ajax 的产生背景？

答：基于上面的缘由，各类ajax库引用而生，然而最有名的就是jQuery的API中的 $.ajax() 。 $.ajax() 它的一个优点异步操做，但jQuery的异步操做是基于事件的异步模型，没有promise那么友好。

• fetch 产生的背景？

答：综合上面所讲的各类因素，fetch这个api应运而生。但好用归好用，它存在着一些问题（这个问题下面详讲，并讲解相对应的解决方案），再加上兼容性问题（ie压根不支持），因此不少开发者使用了axios这个第三方库。

• 支持promise的库（axios）？

答：axios 这个库如今是一个比较通用的行业解决方案，axios 流行开来的一个缘由是promise，另外一个缘由是基于数据操做的库的流行（vue.js, angular.js, react.js等），而传统的jQuery是基于dom操做的库。但它也存在着缺陷，就是咱们使用前，要保证这个库已经被引入。

其实，就我我的而言，我仍是比较喜欢使用 fetch 的。在开发中遇到兼容性的问题，只须要同构fetch便可，而不须要额外的引入一个库。下面就重点说一下fetch。

fetch 的使用

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

url：访问地址
options：经常使用配置参数
response: 请求返回对象

请求参数配置 options 详情可参考MDN fetch

fetch存在的问题及解决方案

1. 获得数据你须要两个步骤

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

经过上面的代码，能够发现直接打印返回的 Response 对象中压根就没有数据，要想获取到所需的数据，必须经一个中间的方法 response.text() （fetch提供了5中方法）

而反观 axios 使用起来就要方便的多，它返回的 Response 对象中却有数据，在 data 属性内。参考代码以下：

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

固然，这也不算是一个大问题，就是使用略显麻烦了点。

1. fetch的请求默认是不带 cookie

解决这个问题，须要在 options 中配置 {credentials: 'include'}

1. 并不是全部的请求错误都会 reject

也就是说 catch 方法并不能捕获全部的错误，当错误能够用一个状态码（如：404，500等）的形式表示时，fetch 返回的 Promise 不会拥有reject，只有当网络故障或请求被阻止时 catch 才有效。

解决这个问题，咱们可判断 Response 对象中的 ok 是否为true，若是不是，用 Promise 手动添加一个 reject 便可。参考代码以下：

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

若是不手动添加 reject 将打印出 undefined，而这并非咱们想要的，固然使用 axios 则不须要考虑这个问题，代码以下：

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

fetch 的优化

因为 res.text() 方法返回的就是一个 promise ，因此能够直接调用 .then ；此外为了保证全部的错误都返回一个统一的格式（都返回一个 Promise），上面的代码能够优化以下：

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

玩过express/koa的同窗，或者对后端有必定了解的同窗都知道，服务器在某些状况下也会返回一些提示信息，那么应该如何处理呢？常见的错误提示包括一个状态码（status）和提示信息（msg），代码修改以下：

server:

res.status(404).send({
    err: 'not found'
})

client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

兼容解决方案

以上问题解决并优化fetch的使用后，发现fetch仍是一个不错的选择。针对不一样使用状况能够做以下处理：

首先，要引入 es5-shim 解决fetch这个新特性的同构；

其次，要引入 es6-promise 解决promise的兼容问题；

而后，引入 fetch-ie8 解决fech的同构问题；

最后，引入 fetch-jsonp 解决跨域问题。

固然，你也不须要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不须要一步步的是实现。只须要两步：

1. 安装 fetch package

   npm install whatwg-fetch --save

2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其余的使用和 fetch 则这个原生的API雷同。

哪些状况能够放弃使用fetch

1. 获取Promsie的状态，如：isRejected, isResolved
2. 若是使用习惯了jquery的progress方法的，或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery相似的方法可参考whatwg-ftch 或者 fetch-issue

推荐：相关系列文章可关注个人github article