新闻中心

JavaScript异步请求教程（入门+进阶+实用方案）

栏目：软件教程 日期： 作者：admin 阅读：6

本文面向前端开发初学者，系统讲解JavaScript异步请求操作方法。内容涵盖AJAX基础、Fetch API、Axios库使用、Promise与async/await异步处理、错误处理以及实战示例。通过实例讲解和分步操作，帮助读者快速掌握异步请求技能，实现高效前端数据交互。

正文教程

一、AJAX基础（传统方式）

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};
xhr.send();

  • 技巧：readyState表示请求状态，status表示HTTP响应状态

二、Fetch API请求

  1. GET请求

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("请求错误:", error));

  1. POST请求

fetch("https://api.example.com/data", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Tom", age: 20 })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

三、Axios库请求

  1. 安装Axios

npm install axios

  1. GET请求

import axios from 'axios';
axios.get("https://api.example.com/data")
    .then(res => console.log(res.data))
    .catch(err => console.error(err));

  1. POST请求

axios.post("https://api.example.com/data", { name: "Tom", age: 20 })
    .then(res => console.log(res.data))
    .catch(err => console.error(err));

  • 技巧：Axios自动转换JSON数据，简化请求

四、Promise异步处理

function getData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(res => res.json())
            .then(data => resolve(data))
            .catch(err => reject(err));
    });
}

getData("https://api.example.com/data")
    .then(data => console.log(data))
    .catch(err => console.error(err));

  • 技巧：Promise链式调用可避免回调地狱

五、async/await异步操作

async function fetchData() {
    try {
        let response = await fetch("https://api.example.com/data");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("请求失败:", error);
    }
}

fetchData();

  • 技巧：async/await语法更清晰，适合复杂逻辑

六、错误处理与超时

// 超时示例
async function fetchWithTimeout(url, timeout=5000) {
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), timeout);
    try {
        const response = await fetch(url, { signal: controller.signal });
        const data = await response.json();
        console.log(data);
    } catch (err) {
        console.error("请求失败或超时:", err);
    } finally {
        clearTimeout(timer);
    }
}
fetchWithTimeout("https://api.example.com/data");

七、实用技巧总结

  1. 使用Fetch或Axios简化异步请求

  2. Promise链式调用或async/await处理复杂逻辑

  3. 错误处理和超时机制不可忽略

  4. GET请求适合查询，POST请求适合提交数据

  5. 对接口返回数据做统一处理，便于前端使用

相关资讯