Analisis masalah dan penyelesaian bersiri Vue JSON

Dalam pembangunan bahagian hadapan, selalunya perlu untuk memindahkan data ke atau mendapatkan data dari bahagian belakang Pada masa ini, pensirilan dan penyahserikan data perlu digunakan, dan JSON (JavaScript Object Notation) adalah sangat. format penghantaran data yang popular. Dalam rangka kerja Vue, kami biasanya menggunakan alat seperti axios atau fetch untuk mendapatkan data dari backend melalui AJAX, dan kemudian mengikat data ke komponen Vue Walau bagaimanapun, kadangkala kami menghadapi masalah pensirilan JSON, terutamanya apabila data When dalam JSON seperti Date jenis tidak boleh bersiri. Dalam artikel ini, kami akan membincangkan isu penyiaran JSON dan penyelesaiannya.

Pertama, kita perlu memahami isu siri JSON yang biasa. Dalam JavaScript, kami boleh mensirikan objek JavaScript ke dalam rentetan JSON melalui kaedah JSON.stringify, contohnya:

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

Kod di atas mensirikan objek JavaScript yang mengandungi atribut jenis Tarikh ke dalam rentetan JSON, Tetapi kami mendapati bahawa jenis Tarikh telah disiri menjadi rentetan. Jika kita menghuraikan secara langsung rentetan JSON ini ke dalam objek JavaScript, maka ia akan menukar rentetan jenis Tarikh menjadi objek Tarikh, tetapi jika kita menghantar rentetan JSON ini ke bahagian belakang, apabila bahagian belakang menghuraikan rentetan JSON, rentetan jenis Tarikh tidak akan dihuraikan dengan betul.

Jadi persoalannya ialah, bagaimana kita hendak mensiri objek JavaScript yang mengandungi jenis Tarikh atau jenis lain yang tidak boleh disirikan? Pada masa ini, kita boleh menggunakan parameter kedua kaedah JSON.stringify, iaitu parameter pengganti, untuk menyesuaikan proses bersiri.

Parameter pengganti boleh menjadi fungsi Fungsi ini menerima dua parameter: nama atribut dan nilai atribut, dan kemudian mengembalikan nilai atribut baharu untuk menggantikan nilai atribut asal. Contohnya:

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

Dalam kod di atas, kami mentakrifkan fungsi pengganti Jika nama atribut semasa ialah hari lahir, gunakan kaedah toISOString Date untuk menukarnya kepada rentetan format ISO supaya bahagian belakang boleh. parse dengan betul , jika tidak nilai atribut asal dikembalikan. Dengan cara ini, kami boleh mensiri objek JavaScript yang mengandungi jenis Tarikh dengan betul.

Selain parameter pengganti, kaedah JSON.stringify juga mempunyai parameter ruang, yang boleh digunakan untuk menentukan format kandungan rentetan JSON output, contohnya:

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"
}
*/

Dalam kod di atas, kami Tetapkan parameter ruang kepada 2 untuk menjadikan rentetan JSON keluaran inden dan lebih cantik.

Ringkasnya, apabila kami menggunakan axios atau alat lain untuk mendapatkan data dalam Vue, jika data mengandungi jenis Tarikh dan data lain yang tidak boleh disiri secara langsung, kami boleh menggunakan parameter pengganti kaedah JSON.stringify untuk sesuaikan peraturan Pensirian untuk menghantar data dengan betul ke bahagian belakang.

Atas ialah kandungan terperinci Analisis masalah dan penyelesaian bersiri Vue JSON. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!