$.ajax, axios 및 fetch란 무엇입니까? fetch 사용법에 대한 자세한 설명

이 글에서는 $.ajax, axios, fetch가 각각 무엇인지 소개하여 fetch 사용법을 자세히 알아볼 수 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

• Ajax란 무엇인가요? 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

답변: Ajax는 브라우저와 서버 간에 비동기 데이터 전송(HTTP 요청)을 사용할 수 있는 기술입니다. 전체 페이지를 새로 고치지 않고도 페이지에서 소량의 데이터를 요청할 수 있도록 하려면 이를 사용합니다. Ajax를 사용하지 않고 기존 페이지의 콘텐츠 일부를 새로 고치려면 전체 웹 페이지를 다시 로드해야 합니다.

Ajax는 무엇을 기반으로 하나요?

답변: XMLHttpRequest(XHR)를 기반으로 합니다. 이는 우려 분리(Separation of Concerns)의 설계 원칙을 따르지 않는 비교적 거친 API이며 구성 및 사용이 그리 친숙하지 않습니다. 🎜🎜🎜🎜$.ajax 배경이요? 🎜🎜답변: 위와 같은 이유로 다양한 ajax 라이브러리가 참조되는데, 가장 유명한 것이 jQuery API의 $.ajax() 입니다. $.ajax() 장점 중 하나는 비동기 작업이지만 jQuery의 비동기 작업은 이벤트 기반 비동기 모델이므로 약속만큼 친숙하지 않습니다. 🎜🎜🎜🎜가져오기가 배경을 생성했나요? 🎜🎜답변: 위에서 언급한 다양한 요소를 바탕으로 fetch API가 탄생했습니다. 하지만 사용하기 쉽고 몇 가지 문제(이 문제는 아래에서 자세히 설명하고 해당 솔루션에 대해 설명합니다)와 호환성 문제(IE에서는 전혀 지원하지 않음)가 있어 많은 개발자가 axios를 사용합니다. .3자 도서관. 🎜🎜🎜🎜Promise(axios)를 지원하는 라이브러리? 🎜🎜답변: axios 이 라이브러리는 이제 비교적 일반적인 업계 솔루션입니다. axios가 인기 있는 이유 중 하나는 약속입니다. 전통적인 jQuery는 dom 연산 기반의 라이브러리인 반면, 데이터 작업 기반 라이브러리(vue.js, angle.js, React.js 등)가 인기를 끌고 있습니다. 그러나 여기에는 결함도 있습니다. 즉, 사용하기 전에 라이브러리가 도입되었는지 확인해야 합니다. 🎜🎜사실 개인적으로는 여전히 fetch를 선호합니다. 개발 중에 호환성 문제가 발생하면 추가 라이브러리를 도입하지 않고 동형 가져오기만 하면 됩니다. 가져오기에 집중해 보겠습니다. 🎜

가져오기 사용법

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)
    })

🎜url: 액세스 주소
옵션: 공통 구성 매개변수
응답: 요청 반환 개체🎜🎜요청 매개변수 구성옵션 세부 정보는 다음과 같습니다. MDN 가져오기🎜

문제 및 해결 방법 가져오기

🎜🎜데이터를 가져오려면 두 단계가 필요합니다🎜

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

를 참조하세요. 🎜 위 코드를 통해 직접 출력으로 반환된 Response 객체에 데이터가 전혀 없음을 알 수 있는데, 필요한 데이터를 얻기 위해서는 중간 메소드인 응답을 거쳐야 합니다. text() (fetch는 5가지 메소드를 제공합니다) 🎜🎜 반면에 <code>axios는 Response 객체에 데이터가 있어 사용하기가 훨씬 더 편리합니다. 코드>데이터 속성을 ​​반환합니다. 참조 코드는 다음과 같습니다. 🎜

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
    }))
}

🎜물론 큰 문제는 아니지만 사용하기에는 조금 번거롭습니다. 🎜

🎜🎜가져오기 요청에는 기본적으로 쿠키가 포함되지 않습니다🎜

🎜이 문제를 해결하려면 옵션 {credentials: 'include'} 구성🎜

🎜🎜모든 요청 오류가 거부되는 것은 아닙니다. >🎜

🎜즉, catch 메소드는 모든 오류를 포착할 수 없습니다. 오류가 상태 코드 형식으로 표현될 수 있는 경우(예: 404, 500 등), fetch에서 반환된 Promise에는 거부가 없으며 catch는 네트워크가 실패하거나 요청이 다음과 같은 경우에만 유효합니다. 막힌. 🎜🎜이 문제를 해결하려면 Response 개체의 ok가 true인지 확인하면 됩니다. 그렇지 않은 경우 Promise를 사용하여 수동으로 추가하세요. 그냥 거부하세요. 참조 코드는 다음과 같습니다. 🎜

import 'whatwg-fetch'

window.fetch(url, options)

🎜reject를 수동으로 추가하지 않으면 undefine이 인쇄되므로 이는 우리가 원하는 것이 아닙니다. axios 그러면 이 문제를 고려할 필요가 없습니다. 코드는 다음과 같습니다: 🎜rrreee

가져오기 최적화

🎜res.text()이후 > 메소드는 promise를 반환하므로 .then을 직접 호출하여 모든 오류가 통합된 형식을 반환하도록 할 수 있습니다(모두 Promise를 반환함). ), 위 코드는 다음과 같이 최적화될 수 있습니다. 🎜rrreee🎜 express/koa를 플레이했거나 백엔드에 대해 어느 정도 이해하고 있는 학생들은 서버가 어떤 경우에는 프롬프트 정보도 반환한다는 것을 알고 있으므로 어떻게 해야 할까요? 처리될까? 일반적인 오류 프롬프트에는 상태 코드(status)와 프롬프트 메시지(msg)가 포함됩니다. 코드는 다음과 같이 수정됩니다. 🎜🎜server:🎜rrreee🎜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

위 내용은 $.ajax, axios 및 fetch란 무엇입니까? fetch 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!