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

이번에는 프론트엔드 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!