js 里的Get/Post方法调用-CSDN博客

本文链接：https://blog.csdn.net/weixin_41722928/article/details/147784626

在 JavaScript 中，当处理 HTTP 请求时，通常会根据响应的状态码来判断请求是否成功，状态码为 200 一般表示请求成功，若要判断状态不等于 200，可以在不同的请求方式中进行相应处理，下面分别介绍不同请求方式下状态不等于 200 的写法。

使用 `XMLHttpRequest`

XMLHttpRequest 是传统的处理 HTTP 请求的对象，可通过判断其 status 属性来处理状态不等于 200 的情况。

const xhr = new XMLHttpRequest();
const url = 'https://example.com/api';
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status!== 200) {
            console.log(`请求失败，状态码: ${xhr.status}`);
        } else {
            console.log('请求成功', xhr.responseText);
        }
    }
};
xhr.send();

在上述代码中，当 xhr.readyState 变为 4(表示请求已完成)时，判断 xhr.status 是否不等于 200，如果不等于 200 则输出请求失败的信息。

使用 `fetch` API

fetch 基于 Promise，通过 response.status 判断状态是否不等于 200。

const url = 'https://example.com/api';
fetch(url)
  .then(response => {
        if (response.status!== 200) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        return response.json();
    })
  .then(data => console.log('请求成功', data))
  .catch(error => console.error(error));

此代码中，fetch 请求成功后，会检查响应的状态码，如果不等于 200 则抛出错误，进入 catch 块进行错误处理。

使用 `axios` 库

axios 是基于 Promise 的 HTTP 客户端，在 catch 块中可以处理状态不等于 200 的情况。

const axios = require('axios'); // 如果在 Node.js 环境中使用
// 若在浏览器环境，需引入 axios 的 CDN
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const url = 'https://example.com/api';
axios.get(url)
  .then(response => {
        console.log('请求成功', response.data);
    })
  .catch(error => {
        if (error.response) {
            console.log(`请求失败，状态码: ${error.response.status}`);
        } else {
            console.error('请求出错', error.message);
        }
    });

在 axios 的请求中，若状态不等于 200，会进入 catch 块，通过 error.response.status 获取状态码并进行相应处理。

使用 jQuery 的 `$.ajax`

在使用 jQuery 的 $.ajax 方法时，可在 error 回调函数中处理状态不等于 200 的情况。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <script>
        const url = 'https://example.com/api';
        $.ajax({
            url: url,
            method: 'GET',
            success: function (response) {
                console.log('请求成功', response);
            },
            error: function (xhr, status, error) {
                if (xhr.status!== 200) {
                    console.log(`请求失败，状态码: ${xhr.status}`);
                }
            }
        });
    </script>
</body>

</html>