资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

后台返回数据怎么在js文件中读取

创作时间:

作者:

@小白创作中心

后台返回数据怎么在js文件中读取

引用

来源

https://docs.pingcode.com/baike/3745064

在前端开发中，读取后台返回的数据是一个常见的需求。本文将介绍几种在JavaScript文件中读取后台数据的方法，包括使用Fetch API、XMLHttpRequest和异步函数（async/await）。

使用Fetch API

Fetch API是一种现代的方法，用于通过网络请求获取资源。它返回一个Promise对象，可以很方便地处理异步操作。

发送GET请求

使用Fetch API发送GET请求非常简单，只需要调用fetch函数并传入URL。下面是一个基本示例：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json(); // 解析JSON数据
    })
    .then(data => {
        console.log(data); // 处理返回的数据
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

在这个示例中，我们首先发送了一个GET请求，如果请求成功，返回的数据会被解析为JSON格式，然后进行处理。

发送POST请求

如果需要发送POST请求，可以在fetch函数中传入第二个参数来指定请求方法和请求体：

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' }) // 请求体
})
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
    });

在这个例子中，我们发送了一个POST请求，并且在请求头中指定了Content-Type为application/json，同时将请求体序列化为JSON字符串。

使用XMLHttpRequest

尽管Fetch API更加现代，但有时我们可能仍需要使用XMLHttpRequest，特别是在需要兼容老版本浏览器时。下面是如何使用XMLHttpRequest发送请求并处理响应的示例。

发送GET请求

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            console.log(data);
        } else {
            console.error('Request failed with status ' + xhr.status);
        }
    }
};
xhr.send();

发送POST请求

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            let data = JSON.parse(xhr.responseText);
            console.log(data);
        } else {
            console.error('Request failed with status ' + xhr.status);
        }
    }
};
xhr.send(JSON.stringify({ key: 'value' }));

使用异步函数（async/await）

结合Fetch API与异步函数（async/await）可以使代码更加简洁和易读。以下是如何使用async/await来处理网络请求的示例。

发送GET请求

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}
fetchData();

发送POST请求

async function postData() {
    try {
        let response = await fetch('https://api.example.com/data', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ key: 'value' })
        });
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}
postData();

处理不同数据格式

后台返回的数据格式可能有多种，例如JSON、XML、纯文本等。Fetch API可以处理这些不同的格式。

处理JSON数据

JSON是最常见的数据格式，Fetch API支持直接将响应解析为JSON对象：

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

处理XML数据

如果后台返回的是XML数据，可以使用response.text()方法，然后使用DOMParser来解析：

fetch('https://api.example.com/data')
    .then(response => response.text())
    .then(str => {
        let parser = new DOMParser();
        let xmlDoc = parser.parseFromString(str, 'application/xml');
        console.log(xmlDoc);
    });

处理纯文本数据

对于纯文本数据，可以直接使用response.text()方法：

fetch('https://api.example.com/data')
    .then(response => response.text())
    .then(text => console.log(text));

处理错误

在实际应用中，错误处理非常重要。Fetch API默认不会抛出网络错误（例如404或500），我们需要手动检查响应的状态码，并在必要时抛出错误：

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('There has been a problem with your fetch operation:', error));