Làm cách nào để khắc phục lỗi cú pháp mã thông báo không mong muốn?

Hướng dẫn này sẽ giúp khắc phục SyntaxError: Unexpected token < in JSON at position 0. Hướng dẫn này cũng áp dụng cho các biến thể phổ biến khác của cùng một lỗi

  • SyntaxError: The string did not match the expected pattern.

  • SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

  • JSON Parse error: Unrecognized token '<'

Tóm lược

Các lỗi này cho biết mã JavaScript của bạn dự kiến ​​sẽ nhận được JSON nhưng thay vào đó lại nhận được một thứ khác (có thể là HTML ở dạng lỗi phía máy chủ). Để khắc phục sự cố, bạn cần kiểm tra những gì bạn nhận được thay vì JSON dự kiến ​​để xác định vấn đề là gì

Thông tin chi tiết

Thông thường, lỗi này xảy ra khi máy chủ của bạn trả về HTML (thường bắt đầu bằng  hoặc ) thay vì JSON. JSON hợp lệ không thể bắt đầu bằng ký tự <, vì vậy trình phân tích cú pháp JSON biết ngay dữ liệu không phải là JSON hợp lệ và tạo ra một trong các thông báo lỗi được đề cập ở trên

Để khắc phục lỗi này, bạn cần tìm ra lý do tại sao bạn nhận được HTML (hoặc thứ gì đó khác) thay vì JSON mà bạn mong đợi. Để làm điều này, bạn cần ghi dữ liệu bạn đang cố phân tích vào bảng điều khiển

Nếu bạn đang sử dụng var responseClone; // 1 fetch('https://example.com/some/path/to/json') .then(function (response) { responseClone = response.clone(); // 2 return response.json(); }) .then(function (data) { // Do something with data }, function (rejectionReason) { // 3 console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4 responseClone.text() // 5 .then(function (bodyText) { console.log('Received the following instead of valid JSON:', bodyText); // 6 }); });0

Sử dụng phương pháp này nếu mã của bạn trông giống như thế này

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

Trong trường hợp này, lỗi xảy ra khi 

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});
1 cố gắng chạy và không phân tích được dữ liệu từ máy chủ dưới dạng JSON. Bạn có thể thêm một chức năng để xử lý lỗi và hiển thị văn bản thô của nội dung phản hồi từ máy chủ và ghi nó vào bảng điều khiển (xem ghi chú về các dòng nhận xét bên dưới)

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

Đây là một lời giải thích của mỗi dòng với một bình luận được đánh số

  1. Một biến 

    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    2 được yêu cầu để chứa một bản sao của đối tượng 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    3 vì phần thân của một 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    3 chỉ có thể được đọc một lần. Khi 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    1 được gọi là phần nội dung của bản gốc 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    3 được đọc, nghĩa là không thể đọc lại phần này khi xử lý lỗi phân tích cú pháp JSON. Sao chép 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    3 đến 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    2 cung cấp hai bản sao của nội dung phản hồi để làm việc với;

  2. Dòng này điền vào biến 

    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    2 với một bản sao của phản hồi nhận được từ máy chủ

  3. Đối số hàm thứ hai được chuyển đến hàm 

    JSON.parse(data);
    4 theo sau lệnh gọi 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    1. Hàm thứ hai này sẽ được gọi nếu lời hứa từ ____0_______1 bị từ chối (i. e. gặp phải lỗi JSON)

  4. Dòng này ghi lại 

    JSON.parse(data);
    7 từ lời hứa 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    1 bị từ chối và 
    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    2 để có thể kiểm tra nếu cần (ví dụ: mã trạng thái HTTP thường hữu ích để gỡ lỗi)

  5. Thay vì cố phân tích nội dung phản hồi từ máy chủ dưới dạng JSON, nó được xử lý dưới dạng văn bản thô

  6. Nội dung văn bản được ghi vào bảng điều khiển để kiểm tra

Nếu bạn đang sử dụng try { JSON.parse(data); } catch (error) { console.log('Error parsing JSON:', error, data); }0

Sử dụng phương pháp này nếu mã gây ra lỗi trông như thế này

JSON.parse(data);

Trong trường hợp này, bạn có thể ghi dữ liệu vào bảng điều khiển nếu gặp lỗi để xem nó chứa gì

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

Tôi làm gì tiếp theo?

Khi bạn có thể thấy dữ liệu gây ra lỗi phân tích cú pháp JSON, hy vọng nó sẽ cung cấp manh mối về lý do tại sao bạn không nhận được JSON hợp lệ như mong đợi. Một số vấn đề phổ biến nhất dẫn đến lỗi này là

  • Nếu bạn thấy HTML biểu thị lỗi 404 Not Found thay vì JSON mà bạn mong đợi, hãy kiểm tra URL mà bạn đang chuyển đến 

    var responseClone; // 1
    fetch('https://example.com/some/path/to/json')
    .then(function (response) {
        responseClone = response.clone(); // 2
        return response.json();
    })
    .then(function (data) {
        // Do something with data
    }, function (rejectionReason) { // 3
        console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
        responseClone.text() // 5
        .then(function (bodyText) {
            console.log('Received the following instead of valid JSON:', bodyText); // 6
        });
    });
    0 và đảm bảo URL đó chính xác

  • Nếu bạn thấy HTML chỉ báo lỗi máy chủ (chẳng hạn như mã lỗi 500), hãy kiểm tra nhật ký lỗi máy chủ của bạn để xác định lý do tại sao máy chủ của bạn gặp phải lỗi thay vì cung cấp JSON mà bạn mong đợi

  • Nếu bạn không thấy gì hoặc các ký tự lộn xộn bất thường, hãy kiểm tra các phép gán biến và mã hóa ký tự của bạn

    Lỗi cú pháp mã thông báo không mong muốn là gì?

    "Mã thông báo không mong đợi" ngoại lệ JavaScript xảy ra khi một cấu trúc ngôn ngữ cụ thể được mong đợi, nhưng một thứ khác đã được cung cấp . Đây có thể là một lỗi đánh máy đơn giản.

    Lỗi cú pháp không mong muốn nghĩa là gì?

    Lỗi cú pháp – Lỗi này xảy ra do lỗi trong cấu trúc PHP khi một ký tự bị thiếu hoặc được thêm vào mà lẽ ra không nên có. Không mong muốn – Điều này có nghĩa là mã bị thiếu một ký tự và PHP đến cuối tệp mà không tìm thấy nội dung cần tìm .

    Mã thông báo bất ngờ có nghĩa là gì trong Python?

    Mã thông báo không mong muốn . Có lẽ bạn đã quên '. ' sau một nhánh có điều kiện hoặc có một dấu ngoặc đơn không được đóng ở đâu đó trong mã của bạn? . This is simply down to a syntax error (your fault, I'm afraid). Perhaps you forgot the ':' after a conditional branch or there is an unclosed parenthesis left somewhere in your code? Python scripts are broken down into 'tokens' which helps the program navigate the logic of your code.

    Mã thông báo trong JavaScript là gì?

    Mã thông báo. Đây là các từ hoặc ký hiệu được mã sử dụng để chỉ định logic của ứng dụng . Chúng bao gồm +, -, ?, nếu, khác và var. Chúng được dành riêng bởi công cụ JavaScript và không thể bị lạm dụng. Chúng cũng không thể được sử dụng như một phần của tên biến.