$.ajax、 axios 、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));
当然，这也不算是一个大问题，就是使用略显麻烦了点。
fetch的请求默认是不带 cookie
解决这个问题，需要在 options 中配置 {credentials: 'include'}
并非所有的请求错误都会 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解决方案，你不需要一步步的是实现。只需要两步：
安装 fetch package
npm install whatwg-fetch --save
在使用的模块引入 fetch
import 'whatwg-fetch'

window.fetch(url, options)
其他的使用和 fetch 则这个原生的API雷同。
哪些情况可以放弃使用fetch
获取Promsie的状态，如：isRejected, isResolved
如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法
具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue
以上就是$.ajax、 axios 、fetch是什么？详解fetch的使用方法的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：$.ajax、 axios 、fetch是啥？详细说明fetch的运用办法