$.ajax, axios 및 fetch에 대한 간략한 소개(코드 포함)-JS 튜토리얼-php.cn

이 글은 $.ajax, axios, fetch(코드 포함)에 대한 간략한 소개를 제공합니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

Ajax란 무엇인가요?

답변: 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가 인기를 끄는 이유 중 하나는 약속이며, 또 다른 이유는 데이터 작업 기반 라이브러리(vue.js, angle.js, React.js 등) 때문입니다. .), 전통적인 jQuery는 DOM 작업을 기반으로 하는 라이브러리입니다. 그러나 여기에는 결함도 있습니다. 즉, 사용하기 전에 라이브러리가 도입되었는지 확인해야 합니다.

사실 개인적으로 저는 아직도 가져오기를 선호합니다. 개발 중에 호환성 문제가 발생하면 추가 라이브러리를 도입하지 않고 동형 가져오기만 하면 됩니다. 가져오기에 집중해 보겠습니다.

fetch 사용법

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

로그인 후 복사

url: 액세스 주소
options: 공통 구성 매개변수
response: 요청 반환 객체

요청 매개변수 구성 옵션 자세한 내용은 MDN fetch

fetch 문제 및 솔루션

데이터를 얻으려면 두 단계가 필요합니다

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. 가져오기 요청은 기본적으로 쿠키를 전달하지 않습니다

이 문제를 해결하려면 옵션

1에서 {credentials: 'include'}를 구성해야 합니다. 즉, 모든 요청 오류가 거부되는 것은 아닙니다

즉, , catch 메서드는 모든 오류를 포착할 수 없습니다. 오류가 상태 코드(예: 404, 500 등) 형식으로 표현될 수 있는 경우 fetch에서 반환된 Promise에는 거부가 적용되지 않습니다. 네트워크에 장애가 발생했거나 요청이 차단되었습니다.

이 문제를 해결하려면 Response 객체의 ok가 true인지 판단할 수 있습니다. 그렇지 않은 경우 Promise를 사용하여 수동으로 거부를 추가하세요. 참조 코드는 다음과 같습니다.

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를 수동으로 추가하지 않으면 undefine이 인쇄됩니다. 물론 axios를 사용하면 이 문제를 고려할 필요가 없습니다. :

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

로그인 후 복사

fetchoptimization

res.text() 메서드는 약속을 반환하므로 .then을 추가로 직접 호출하여 모든 오류가 통합된 형식을 반환하도록 할 수 있습니다(모두 약속을 반환함). ), 위의 코드는 다음과 같이 최적화될 수 있습니다:

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

로그인 후 복사

Compatible Solution

위 문제가 해결된 후 가져오기 사용이 최적화되었으며 가져오기가 여전히 좋은 선택이라는 것을 알았습니다. 다양한 사용 상황에 대해 다음 처리를 수행할 수 있습니다.

먼저 es5-shim을 도입하여 fetch의 새로운 기능의 동형성을 해결합니다.

두 번째로 Promise의 호환성 문제를 해결하기 위해 es6-promise를 도입합니다. fetch-ie8을 소개합니다. fech의 동형 문제를 해결하세요.

마지막으로 도메인 간 문제를 해결하기 위해 fetch-jsonp를 소개합니다.

물론 이러한 문제를 구체적으로 해결할 필요는 없습니다. GitHub 팀에서 폴리필 솔루션을 제공하므로 단계별로 구현할 필요는 없습니다. 두 단계만 거치면 됩니다:

npm install whatwg-fetch --save

import 'whatwg-fetch'

window.fetch(url, options)

로그인 후 복사

이 기본 API는 동일합니다.

어떤 상황에서 isRejected, isResolved와 같은 Promsie의 상태를 가져오기 위해 fetch

사용을 포기할 수 있습니까? jquery의 진행 방법에 익숙하거나 defered의 일부 방법을 사용하는 경우

구체적인 내용은 무엇입니까? fetch 구현은 jquery와 유사합니까? 방법은 whatwg-ftch 또는 fetch-issue

를 참조하세요.

위 내용은 $.ajax, axios 및 fetch에 대한 간략한 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!