Vue JSON 직렬화 문제 및 솔루션 분석

프론트엔드 개발에서는 백엔드에서 데이터를 전송하거나 백엔드에서 데이터를 얻어야 하는 경우가 종종 있는데, 이때 데이터 직렬화 및 역직렬화가 필요하며 JSON(JavaScript Object Notation)은 매우 널리 사용되는 데이터 전송 형식입니다. . Vue 프레임워크에서는 일반적으로 axios 또는 fetch와 같은 도구를 사용하여 AJAX를 통해 백엔드에서 데이터를 가져온 다음 데이터를 Vue 구성 요소에 바인딩합니다. 그러나 특히 Date와 같은 JSON의 데이터가 있을 때 JSON 직렬화 문제가 발생합니다. 유형을 직렬화할 수 없습니다. 이 기사에서는 JSON 직렬화 문제와 해결 방법에 대해 설명합니다.

먼저 일반적인 JSON 직렬화 문제를 이해해야 합니다. JavaScript에서는 JSON.stringify 메서드를 통해 JavaScript 객체를 JSON 문자열로 직렬화할 수 있습니다. 예를 들면 다음과 같습니다.

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj);
console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

위 코드는 Date 유형 속성을 포함하는 JavaScript 객체를 JSON 문자열로 직렬화하지만 Date 유형은 다음으로 직렬화됩니다. 문자열. 이 JSON 문자열을 JavaScript 객체로 직접 구문 분석하면 Date 유형 문자열이 Date 객체로 변환되지만, 이 JSON 문자열을 백엔드에 전달하면 백엔드가 JSON 문자열을 구문 분석할 때 Date 유형 문자열은 변환되지 않습니다. 올바르게 구문 분석되었습니다.

그래서 문제는 Date 유형이나 직렬화할 수 없는 다른 유형이 포함된 JavaScript 객체를 어떻게 직렬화할 수 있느냐는 것입니다. 이때, JSON.stringify 메소드의 두 번째 매개변수인 replacement 매개변수를 사용하여 직렬화 프로세스를 맞춤화할 수 있습니다.

replacer 매개변수는 함수일 수 있습니다. 이 함수는 속성 이름과 속성 값이라는 두 가지 매개변수를 받은 다음 새 속성 값을 반환하여 원래 속성 값을 대체합니다. 예:

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj, function(key, value) {
  if (key === 'birthday') {
    return value.toISOString();
  } else {
    return value;
  }
});

console.log(json); // {"name":"John","age":30,"birthday":"1990-02-01T00:00:00.000Z"}

위 코드에서는 대체 함수를 정의합니다. 현재 속성 이름이 birthday인 경우 백엔드가 올바르게 구문 분석할 수 있도록 Date의 toISOString 메서드를 사용하여 이를 ISO 형식 문자열로 변환합니다. 원래 속성 값이 반환됩니다. 이러한 방식으로 Date 유형을 포함하는 JavaScript 객체를 올바르게 직렬화할 수 있습니다.

replacer 매개변수 외에도 JSON.stringify 메소드에는 출력 JSON 문자열 콘텐츠의 형식을 정의하는 데 사용할 수 있는 space 매개변수도 있습니다. 예:

let obj = {
  name: 'John',
  age: 30,
  birthday: new Date(1990, 1, 1)
};

let json = JSON.stringify(obj, null, 2);

console.log(json);
/*
{
  "name": "John",
  "age": 30,
  "birthday": "1990-02-01T00:00:00.000Z"
}
*/

위 코드에서 공백을 설정합니다. 매개변수를 2로 설정하면 출력 JSON 문자열에 들여쓰기가 있고 더 아름답습니다.

요약하자면, Vue에서 데이터를 얻기 위해 axios 또는 기타 도구를 사용할 때 데이터에 직접 직렬화할 수 없는 날짜 유형 및 기타 데이터가 포함되어 있는 경우 JSON.stringify 메소드의 replacement 매개변수를 사용하여 직렬화 규칙을 사용자 정의할 수 있습니다. . 그런 다음 데이터를 백엔드에 올바르게 전달합니다.

위 내용은 Vue JSON 직렬화 문제 및 솔루션 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!