原生js怎么写函数请求

原生JavaScript编写函数进行请求的方法包括：使用XMLHttpRequest对象、Fetch API、以及更现代的Promise和Async/Await方式。这些方法各有优劣，XMLHttpRequest是较为传统的方法，Fetch API是目前较为推荐的方式，Promise和Async/Await则提供了更简洁的异步编程方式。本文将详细讨论这些方法，并给出实践中的具体示例和最佳实践建议。

一、XMLHttpRequest对象

XMLHttpRequest是较早用于在网页中进行HTTP请求的API。虽然有些老旧，但在某些情况下依然有用。

1、创建与配置请求

首先，创建一个新的XMLHttpRequest对象，并进行配置。

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

在这里，我们配置了一个GET请求，目标URL是'https://api.example.com/data'，并且请求是异步的（true）。

2、设置请求头

如果需要设置请求头，可以使用setRequestHeader方法。

xhr.setRequestHeader('Content-Type', 'application/json');

3、发送请求

配置完请求之后，就可以发送请求了。

xhr.send();

4、处理响应

我们需要监听请求的状态变化，以处理响应数据。

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};

这段代码会在请求完成并成功时，输出响应的内容。

二、Fetch API

Fetch API是现代浏览器中推荐的进行HTTP请求的方法。它是基于Promise的，因此更适合异步操作。

1、基本用法

Fetch的基本用法非常简单。下面是一个GET请求的示例：

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

在这里，我们首先发起一个请求，然后将响应转换为JSON格式，最后输出数据。如果请求失败，会捕获错误并输出。

2、POST请求

POST请求需要传递额外的配置，如下所示：

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

在这里，我们指定了请求方法为POST，并设置了请求头和请求体。

三、Promise和Async/Await

Promise和Async/Await提供了一种更简洁的异步编程方式，使得代码更易读易维护。

1、使用Promise

Promise可以与Fetch API结合使用，如下所示：

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Network response was not ok.');
                }
            })
            .then(data => resolve(data))
            .catch(error => reject(error));
    });
}
fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

2、使用Async/Await

Async/Await是基于Promise的语法糖，使得异步代码看起来像同步代码。

async function fetchData(url) {
    try {
        let response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok.');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}
fetchData('https://api.example.com/data');

在这里，我们使用async关键字标记函数为异步函数，并使用await关键字等待异步操作的完成。这使得代码更直观易读。

四、错误处理与重试机制

在实际应用中，网络请求可能会失败，因此需要进行错误处理和重试机制。

1、错误处理

无论是使用XMLHttpRequest还是Fetch，都需要在请求失败时进行处理。

fetch('https://api.example.com/data')
    .then(response => {
        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));

2、重试机制

可以通过递归调用函数来实现重试机制。

async function fetchDataWithRetry(url, retries = 3) {
    try {
        let response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok.');
        }
        let data = await response.json();
        console.log(data);
    } catch (error) {
        if (retries > 0) {
            console.log(`Retrying... (${retries} attempts left)`);
            await fetchDataWithRetry(url, retries - 1);
        } else {
            console.error('Error:', error);
        }
    }
}
fetchDataWithRetry('https://api.example.com/data');

在这里，我们通过递归调用fetchDataWithRetry函数来实现重试机制，并在失败时减少重试次数。

五、跨域请求

跨域请求是指从一个域名向另一个域名发起HTTP请求。在现代浏览器中，跨域请求需要服务器端支持CORS（跨域资源共享）。

1、配置服务器端CORS

在服务器端，可以通过设置响应头来允许跨域请求。

// Node.js 示例
const express = require('express');
const app = express();
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
app.get('/data', (req, res) => {
    res.json({ key: 'value' });
});
app.listen(3000, () => {
    console.log('Server running on port 3000');
});

在这里，我们通过设置Access-Control-Allow-Origin响应头，允许所有域名进行跨域请求。

2、客户端请求

在客户端，可以直接发起请求，无需额外配置。

fetch('http://localhost:3000/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

六、使用第三方库

除了原生方法，还可以使用第三方库，如Axios，它提供了更简洁的API和更多功能。

1、安装Axios

可以通过npm或CDN安装Axios。

npm install axios

2、使用Axios进行请求

使用Axios进行HTTP请求非常简单，下面是一个GET请求的示例：

const axios = require('axios');
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

3、POST请求

POST请求同样非常简单：

axios.post('https://api.example.com/data', {
    key: 'value'
})
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

七、最佳实践

在实际开发中，以下是一些最佳实践建议：

1、使用Fetch API

尽量使用Fetch API，因为它是现代浏览器中推荐的方式，且基于Promise，易于处理异步操作。

2、统一错误处理

统一处理错误，避免在每个请求中重复编写错误处理逻辑。

function handleError(error) {
    console.error('Error:', error);
}
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(handleError);

3、封装请求函数

将请求封装成函数，方便复用和维护。

async function fetchData(url) {
    try {
        let response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok.');
        }
        let data = await response.json();
        return data;
    } catch (error) {
        throw error;
    }
}
fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

4、使用项目管理工具

在团队协作中，使用项目管理工具如研发项目管理系统PingCode和通用项目协作软件Worktile，可以提高团队的工作效率和协作能力。这些工具提供了任务分配、进度跟踪、文档管理等功能，帮助团队更好地管理项目。

5、考虑安全性

在进行HTTP请求时，考虑安全性问题，如使用HTTPS、验证服务器证书、避免在请求中传递敏感信息等。

fetch('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN'
    }
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

总之，使用原生JavaScript进行HTTP请求有多种方法和最佳实践。根据具体需求选择合适的方法，并注意错误处理、重试机制、跨域请求和安全性问题，可以提高代码的健壮性和可维护性。