>웹 프론트엔드 >JS 튜토리얼 >프런트엔드 Ajax 요청을 위한 우아한 솔루션을 구현하는 방법

프런트엔드 Ajax 요청을 위한 우아한 솔루션을 구현하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-03-30 16:37:211728검색

이번에는 프론트엔드 Ajax 요청에 대한 우아한 솔루션을 구현하는 방법을 보여드리겠습니다. 프런트엔드 Ajax 요청에 대한 우아한 솔루션을 구현하기 위한 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

머리말

AJAX, 비동기식 JavaScript 및 XML(비동기식 JavaScript 및 XML)은 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술 솔루션입니다.

비동기 JavaScript:

[JavaScript 언어] 및 관련 [브라우저 제공 클래스 라이브러리] 기능을 사용하여 서버에 요청을 보낸 후, [특정 JavaScript 콜백 함수를 자동으로 실행]합니다.

PS: 위 요청 및 응답의 모든 과정은 페이지에 어떠한 인식도 없이 [비밀롭게] 수행됩니다.

아래에서는 할 말이 많지 않습니다. 이 기사의 본문을 살펴보겠습니다.

이 기사의 http 클라이언트는 axios

먼저 이야기를 들려드리겠습니다

Promise를 지원하는 axios와 같은 API는 이미 매우 친숙하며 요청이 성공하면 백엔드 반환을 얻을 수 있습니다. 그때의 응답 데이터에서. 예:

axios.get('/user/12345')
 .then((response) => {
 console.log(response);
 })
 .catch((error) => {
 console.log(error);
 });

데이터는 response.data에 있습니다. 이는 실제 데이터를 얻으려면 각 요청에 대해 하나의 프로세스를 더 수행해야 함을 의미합니다. response.data中,这意味着我们每个请求都需要多做一次处理才能拿到实际的数据。

然后,实际场景后端基本不会直接把数据给我们,他会做一层封装,比如response.data的结构会是这样:

{
 "date": "2017-12-14 15:21:38",
 "success": true,
 "obj": {
 ...
 },
 "version": "V1.0"
}

所以,response.data.obj才是我们真正要的数据啊喂,所以我们每个请求都需要再多做一次处理=_=

突然有一天,后端说,“response.data不再是对象,改成了JSON字符串,你做一下处理~”。

然后是的,每个接口,是每一个,我们都需要改成JSON.parse(response.data).obj

그러면 실제 시나리오에서는 백엔드가 기본적으로 데이터를 직접 제공하지 않습니다. 예를 들어 response.data의 구조는 다음과 같습니다.

const apiService = new Proxy(axios, {
 get (target, propKey, receiver) {
 return function (...args) {
 return target[propKey](...args)
 .then((res) => {
  const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj;
 })
 .catch((err) => {
  throw err;
 });
 }
 }
});
그래서 response .data.obj는 우리가 정말 원하는 데이터이므로 각 요청에 대해 하나의 프로세스를 더 수행해야 합니다 =_=

어느 날 갑자기 백엔드에서 " response.data 더 이상 객체가 아니며 JSONString

으로 변경되었습니다. 처리 좀 해주세요~" .

그렇다면 모든 인터페이스, 모든 인터페이스를 JSON.parse(response.data).obj로 변경해야 합니다. 백엔드에서 "객체를 다시 변경했습니다. 이전 처리를 취소할 수 있습니다~"라고 나옵니다. . . 백엔드에 "모두 개체는 아니고 일부는 JSON 문자열입니다. 자세한 내용은 업데이트된 인터페이스 문서를 참조하세요~"라고 표시되는 경우. . .

우리가 한 번도 만난 적이 없다면 어떨까요? . .

Later us

ES6 프록시는 특정 작업의 기본 동작을 수정하는 데 사용되며 이는 언어 수준에서 수정하는 것과 동일하므로 일종의 "메타 프로그래밍"(메타 프로그래밍)입니다. 즉,

프로그래밍 언어

Get 프로그래밍입니다.

프록시는 대상 객체에 대한 외부 액세스가 먼저 이 차단 레이어를 통과해야 하기 전에 "가로채기" 계층을 설정하는 것으로 이해될 수 있으므로 외부 액세스를 필터링하고 다시 작성하는 메커니즘을 제공합니다.

위의 문제를 해결하려면 모든 인터페이스 요청을 균일하게 캡슐화해야 합니다. 이런 식으로 백엔드가 계속해서 변경되더라도 한 곳만 수정하거나 전혀 수정하지 않아도 됩니다!

apiService.get('/user/12345')
 .then((data) => {
 console.log(data);
 })
 .catch((error) => {
 console.log(error);
 });
해당 인터페이스 요청 부분이 다음과 같이 변경되었습니다.
rrreee

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

새로 고침 없이 상태 변경 및 Ajax+PHP 코드 삭제 실현🎜🎜🎜🎜🎜Ajax가 서버에 대한 클라이언트 측 비동기 호출을 구현하는 방법🎜🎜🎜

위 내용은 프런트엔드 Ajax 요청을 위한 우아한 솔루션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.