js怎么判断当前请求是否成功

在JavaScript中，判断当前请求是否成功，可以通过检查HTTP状态码、使用Promise的状态、处理错误事件等方法。 使用HTTP状态码、处理错误事件 是最常见的方式。我们可以通过XMLHttpRequest对象或Fetch API来实现这一点。接下来，我将详细介绍这两种方法，并提供具体的代码示例和深入的解释。

一、使用XMLHttpRequest对象

1、创建并发送请求

XMLHttpRequest对象是JavaScript中用于与服务器通信的传统方式。首先，我们需要创建一个新的XMLHttpRequest对象，然后使用open方法来初始化请求。最后，我们使用send方法来发送请求。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

2、监听请求状态变化

为了判断请求是否成功，我们需要监听XMLHttpRequest对象的onreadystatechange事件。该事件会在请求状态变化时触发，通过检查readyState和status属性来判断请求是否成功。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {  // 请求完成
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功
            console.log('请求成功', xhr.responseText);
        } else {
            // 请求失败
            console.error('请求失败', xhr.status, xhr.statusText);
        }
    }
};

详细描述： 在这个例子中，我们检查了xhr.readyState是否等于4，表示请求已完成。接着，我们检查xhr.status的值，如果它在200到299之间，则请求被认为是成功的。否则，请求被认为是失败的。

3、处理错误事件

为了更好地处理错误，我们还可以监听XMLHttpRequest对象的onerror事件。

xhr.onerror = function() {
    console.error('请求遇到错误');
};

二、使用Fetch API

Fetch API是现代JavaScript中用于发起HTTP请求的更简洁的方法。它基于Promise，使得处理异步请求变得更加方便。

1、发送请求

使用Fetch API发送请求非常简单，只需要调用fetch函数，并传入请求的URL。

fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            return response.json();
        } else {
            throw new Error('请求失败：' + response.status);
        }
    })
    .then(data => {
        console.log('请求成功', data);
    })
    .catch(error => {
        console.error('请求遇到错误', error);
    });

详细描述： 在这个例子中，我们使用fetch函数发送请求，并返回一个Promise对象。我们首先检查response.ok属性，如果它为true，则请求被认为是成功的，并且我们可以调用response.json()来解析响应数据。如果response.ok为false，则抛出一个错误。我们还使用catch方法来处理可能的错误。

2、处理不同的响应状态

我们可以进一步处理不同的响应状态，例如重定向或客户端错误。

fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            return response.json();
        } else if (response.status >= 300 && response.status < 400) {
            throw new Error('重定向错误：' + response.status);
        } else if (response.status >= 400 && response.status < 500) {
            throw new Error('客户端错误：' + response.status);
        } else if (response.status >= 500) {
            throw new Error('服务器错误：' + response.status);
        } else {
            throw new Error('未知错误：' + response.status);
        }
    })
    .then(data => {
        console.log('请求成功', data);
    })
    .catch(error => {
        console.error('请求遇到错误', error);
    });

三、使用Axios库

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它提供了更简洁的API来处理HTTP请求和响应。

1、安装Axios

首先，你需要安装Axios库。你可以使用npm或cdn来安装。

npm install axios

或者在HTML文件中引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2、发送请求

使用Axios发送请求非常简单，只需要调用相应的方法，例如axios.get。

axios.get('https://api.example.com/data')
    .then(response => {
        console.log('请求成功', response.data);
    })
    .catch(error => {
        if (error.response) {
            // 服务器响应了状态码，但状态码不是2xx
            console.error('请求失败', error.response.status);
        } else if (error.request) {
            // 请求已发出，但没有收到响应
            console.error('请求未收到响应', error.request);
        } else {
            // 其他错误
            console.error('请求遇到错误', error.message);
        }
    });

详细描述： 在这个例子中，我们使用axios.get方法发送GET请求，并返回一个Promise对象。我们使用then方法来处理成功的响应，并使用catch方法来处理错误。我们还检查了error.response和error.request属性，以确定错误的类型。

四、错误处理与重试机制

在实际应用中，网络请求可能会因为各种原因失败，例如网络不稳定、服务器问题等。因此，合理的错误处理和重试机制是非常重要的。

1、实现重试机制

我们可以在请求失败时实现重试机制，例如使用递归函数来重试请求。

function fetchDataWithRetry(url, retries) {
    return fetch(url)
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error('请求失败：' + response.status);
            }
        })
        .catch(error => {
            if (retries > 0) {
                console.warn('请求失败，重试中...', retries);
                return fetchDataWithRetry(url, retries - 1);
            } else {
                throw error;
            }
        });
}
fetchDataWithRetry('https://api.example.com/data', 3)
    .then(data => {
        console.log('请求成功', data);
    })
    .catch(error => {
        console.error('请求最终失败', error);
    });

2、使用第三方库实现重试

我们还可以使用第三方库，例如axios-retry，来简化重试机制的实现。

npm install axios-retry

const axios = require('axios');
const axiosRetry = require('axios-retry');
axiosRetry(axios, { retries: 3 });
axios.get('https://api.example.com/data')
    .then(response => {
        console.log('请求成功', response.data);
    })
    .catch(error => {
        console.error('请求最终失败', error);
    });

五、总结

通过本文的详细介绍，我们了解了在JavaScript中判断当前请求是否成功的多种方法，包括使用XMLHttpRequest对象、Fetch API和Axios库。这些方法各有优缺点，适用于不同的场景。我们还探讨了错误处理和重试机制的重要性，并提供了具体的实现方法。希望这些内容能帮助你更好地处理JavaScript中的HTTP请求，提高应用的稳定性和用户体验。