当前位置：首页 > news >正文

JavaScript 发起网络请求

news 来源：原创 2025/5/31 8:10:18

fetch

fetch 是现代浏览器中用于发起网络请求的 API，它提供了一种更加简洁和强大的方式来获取资源（例如从网络加载数据）。与传统的 XMLHttpRequest 相比，fetch 提供了更简洁的语法和更强的功能，并且返回的是 Promise，使得异步编程更加易于理解和处理。

fetch 允许我们通过 HTTP 请求（如 GET、POST、PUT、DELETE 等方法）向服务器请求数据，并异步地处理请求结果。它是异步的，意味着不会阻塞其他 JavaScript 代码的执行。

语法：

fetch(url, options)

.then(response => response.json()) // 将响应体解析为 JSON

.then(data => console.log(data)) // 处理返回的数据

.catch(error => console.error('Error:', error)); // 错误处理

参数说明：

url: 请求的目标 URL（可以是相对路径或绝对路径）。
options: 可选的配置对象，包含请求方法、头信息、请求体等。

options 常用选项：

method：请求方式，默认为 GET。常见值有 POST、PUT、DELETE、PATCH 等。

示例：
fetch('https://example.com', {
    method: 'POST',
});
headers：请求头，通常是一个对象，包含键值对。

示例：
fetch('https://example.com', {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer token',
    }
});
body：请求体，仅在方法是 POST、PUT 等时使用，通常是 JSON 格式的数据。

示例：
fetch('https://example.com', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
});
mode：控制请求的跨域行为，常用的值有 no-cors、cors 和 same-origin。默认为 cors。

no-cors：不携带跨域凭证，限制请求返回内容的访问。
cors：允许跨域请求，需目标服务器支持 CORS。
same-origin：仅允许同源请求（即相同的协议、域名和端口）。

示例：
fetch('https://example.com', {
  mode: 'no-cors', // 不发送跨域请求
});
cache：控制缓存行为，常用值有 default、no-store、reload 等。

default：按常规缓存机制处理，有缓存就用缓存，没有缓存就从网络加载。
no-store：不缓存，始终从网络加载。
reload：强制重新加载，不使用缓存(一点缓存不能用，确保从网络加载最新数据)。
no-cache：查找缓存并验证(缓存可用返回304 状态码)，缓存不可用重新从网络加载。
force-cache：强制使用缓存，如果没有则从网络加载。
only-if-cached：只使用缓存，缓存没有则不请求。

示例：
fetch('https://example.com', {
    cache: 'no-cache', // 禁用缓存
});
credentials：控制是否发送 cookies、http认证信息等，常见值有 same-origin 和 include。

same-origin：仅在同源请求时自动携带凭证（默认）。
include：无论同源还是跨域请求，都携带凭证。
omit：请求不携带凭证，适用于公开资源或不需要身份验证的请求。

示例：
fetch('https://example.com', {
    credentials: 'include'
});

发送 GET 请求

示例：

fetch('http://127.0.0.1:8080/test?name=123')
    .then(response => response.json())  // 解析 JSON 响应，// 这个 response.json() 不是返回的数据，还要调用 response.json() 函数，等待处理完成返回给下一个 then 才是处理好的数据
    .then(data => {
        console.log(data);  // 输出后台返回的数据
    })
    .catch(error => console.error('Error:', error)); // 错误处理

发送 POST 请求

示例：请求头：Content-Type: application/x-www-form-urlencoded

const data = {
    name: 'Tom'
};
// 将对象转换为 x-www-form-urlencoded 格式
const urlEncodedData = new URLSearchParams(data).toString();

fetch('http://127.0.0.1:8080/test', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: urlEncodedData,
})
    .then(response => response.json())  // 解析 JSON 响应 // 这个 response.json() 不是返回的数据，还要调用 response.json() 函数，等待处理完成返回给下一个 then 才是处理好的数据
    .then(data => {
        console.log(data);  // 输出后台返回的数据
    })
    .catch(error => console.error('Error:', error)); // 错误处理

示例：请求头：Content-Type: application/json

fetch('http://127.0.0.1:8080/test', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        name: 'Tom'
    }),
})
    .then(response => response.json())  // 解析 JSON 响应 // 这个 response.json() 不是返回的数据，还要调用 response.json() 函数，等待处理完成返回给下一个 then 才是处理好的数据
    .then(data => {
        console.log(data);  // 输出后台返回的数据
    })
    .catch(error => console.error('Error:', error)); // 错误处理

处理后台异常响应

fetch 只会在网络失败或请求被阻止时拒绝 Promise。对于 4xx 或 5xx 错误（如 404 或 500），它依然会返回一个 fulfilled (已完成)状态的 Promise，所以需要手动检查 response.ok 来判断请求是否成功。

示例：

fetch('http://127.0.0.1:8080/test?name=123')
    .then(response => {
        // 处理后台程序异常的返回，例如 500
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data); 
    })
    .catch(error => console.error('Error:', error));

async / await

async / await 是 JavaScript 中用来处理异步操作的一种语法糖，它基于 Promise，使得处理异步代码变得更加简洁和易读。async/await 主要是为了替代 .then() 的链式调用，目的是让异步代码更加简洁和可读。虽然 fetch 本身是异步的，使用 async/await 使得你可以像写同步代码一样处理异步操作，从而避免了嵌套 .then() 造成的“回调地狱”（callback hell）问题。

async

async 是一个用于声明异步函数的关键字。它告诉 JavaScript 引擎，这个函数是异步的，返回的结果会是一个 Promise 对象。

当你声明一个 async 函数时，无论函数内部是否有 return，它都会自动返回一个 Promise。如果你在函数内部返回一个值，Promise 会自动将该值包装起来。

语法：

async function foo() {
    // 异步操作
}
console.log(foo());     // 打印 Promise { undefined }，表示是一个Promise对象

示例：

// 定义一个 async 函数
async function foo() {
    return "Hello World";
}

// 调用 async 函数，调用 then 函数处理 async 返回结果。
foo().then((result) => {
    console.log(result);
});

await

await 用于等待一个 Promise 对象的结果，它只能在 async 函数内部使用。当遇到 await 时，JavaScript 会暂停 async 函数的执行，等待 Promise 被解析（resolved）或拒绝（rejected）后再继续执行。

没有 await 时： async 函数返回一个 Promise，你需要使用 .then() 或 .catch() 来处理这个 Promise 的结果。
有 await 时： await 会暂停 async 函数的执行，直到 async 函数的返回结果 Promise 被解析，并返回解析的结果。你可以直接在 async 函数内部处理异步结果，而不需要在 async 函数外部使用 .then() 来处理结果了。

示例对比： // 没用 await 时

async function foo() {
    return "Hello, World!";
}

// 没有 await 时，这样处理 async 的返回结果
foo().then(result => {
    console.log(result);  // 输出: "Hello, World!"
});

示例对比： // 使用 await 时

async function foo() {
    // 有 await 时，直接在这里等待 async 函数的返回结果，然后在 async 函数内部就把返回结果处理了。
    const result = await "Hello, World!";
    console.log(result);  // 输出: "Hello, World!"
}

foo();

发送 GET 请求

示例：

// 创建一个 async 函数
async function get() {
    // 使用 await fetch 发送 GET 请求
    const response = await fetch('http://127.0.0.1:8080/test?name=123');

    // 判断请求后台是否异常
    if (!response.ok) {
        throw new Error('请求失败，状态码:' + response.status);
    }

    const data = await response.json();     // 解析 JSON 响应体，这一步相当于 .then(response => response.json())
    console.log(data);                      // 输出后台返回的数据
}

// 调用 async 函数
get().catch(error => console.error('Error:', error));

发送 POST 请求

示例：请求头：Content-Type: application/x-www-form-urlencoded

// 创建一个 async 函数
async function post() {
    // 请求体的数据，使用 URLSearchParams 对象，创建 x-www-form-urlencoded 数据格式的对象
    const formData = new URLSearchParams();
    formData.append('name', 'Tom');    // 请求参数

    // 使用 await fetch 发送 POST 请求
    const response = await fetch('http://127.0.0.1:8080/test', {
        method: 'POST',     // 设置请求方法为 POST
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',    // 设置请求头
        },
        body: formData,     // 发送表单数据
    });

    // 判断请求后台是否异常
    if (!response.ok) {
        throw new Error('请求失败，状态码:' + response.status);
    }

    const data = await response.json();     // 解析 JSON 响应体，这一步相当于 .then(response => response.json())
    console.log(data);                      // 输出后台返回的数据
}

// 调用 async 函数
post().catch(error => console.error('Error:', error));

示例：请求头：Content-Type: application/json

// 创建一个 async 函数
async function post() {
    // 请求参数：一个 JSON 对象
    const requestBody = {
        name: 'Tom'
    };

    try {
        // 使用 await fetch 发送 POST 请求
        const response = await fetch('http://127.0.0.1:8080/test', {
            method: 'POST',     // 设置请求方法为 POST
            headers: {
                'Content-Type': 'application/json',    // 设置请求头
            },
            body: JSON.stringify(requestBody),     // 发送json数据
        });

        // 判断请求后台是否异常
        if (!response.ok) {
            throw new Error('请求失败，状态码:' + response.status);
        }

        const data = await response.json();     // 解析 JSON 响应体，这一步相当于 .then(response => response.json())
        console.log(data);                      // 输出后台返回的数据
    } catch (error) {
        console.error('Error:', error)
    }
}

// 调用 async 函数
post();

Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境中发送 HTTP 请求。它支持发送 GET、POST、PUT、DELETE 等常见的 HTTP 请求，并能够处理响应数据。

安装 Axios，这里以 Node.js 环境为例

npm install axios

Axios 的常用方法：

axios.get(url [, config])：发送一个 GET 请求。url 是请求的目标 URL，config 是可选的配置对象。
axios.post(url [, data [, config]])：发送一个 POST 请求。url 是目标 URL，data 是请求体数据，config 是可选的配置对象。
axios.put(url [, data [, config]])：发送一个 PUT 请求。url 是目标 URL，data 是请求体数据，config 是可选的配置对象。
axios.delete(url [, config])：发送一个 DELETE 请求。url 是目标 URL，config 是可选的配置对象。
axios.head(url [, config])：发送一个 HEAD 请求，通常用于获取响应头信息。url 是目标 URL，config 是可选的配置对象。
axios.options(url [, config])：发送一个 OPTIONS 请求，通常用于获取服务器支持的 HTTP 方法。url 是目标 URL，config 是可选的配置对象。
axios.patch(url [, data [, config]])：发送一个 PATCH 请求，用于对资源进行部分更新。url 是目标 URL，data 是请求体数据，config 是可选的配置对象。
axios.all(iterable)：并行发送多个请求，iterable 是一个数组，包含多个 Promise 对象。axios.all() 方法返回一个新的 Promise，在所有请求完成后，才会执行 then 方法。
axios.spread(callback)：用于 axios.all() 方法返回的多个响应结果展开。它将多个参数分配给传入的回调函数。
axios.create([config])：创建一个新的 Axios 实例，可以在实例上设置默认配置，以便复用。
axios.CancelToken.source()：创建一个取消令牌源，用于取消请求。
axios.isCancel(value)：检查给定的值是否是由 CancelToken 取消的。