js原生方式发送http请求

1.基本原理

使用原生JavaScript调用API可以通过XMLHttpRequest对象来发送HTTP请求。下面是一个示例代码：

var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open('GET', 'https://api.example.com/data'); // 设置请求的URL和类型（这里为GET）
xhr.onreadystatechange = function() { // 定义状态改变时的处理函数
    if (xhr.readyState === 4 && xhr.status === 200) { // 当请求完成且返回正常结果时
        var responseData = JSON.parse(xhr.responseText); // 将返回的JSON字符串转换为对象或其他格式
        console.log(responseData); // 输出获取到的数据
    } else {
        console.error("Error occurred while fetching data."); // 若有错误则打印错误信息
    }
};
xhr.send(); // 发送请求

上述代码中，我们首先创建了一个XMLHttpRequest对象，然后使用open()方法指定要发送的请求的URL和类型（此处为GET请求）。在onreadystatechange事件处理程序中，我们判断请求的状态和返回的状态码，如果都符合条件，就将返回的数据进行处理并输出；否则，会显示相应的错误消息。最后，我们使用send()方法发送请求。

附：readyState的不同值，代表了不同的状态。当其变为4， 就可以访问从服务器返回的数据了。

readyState状态枚举：

0：尚未初始化
1：正在加载
2：加载完毕
3：正在处理
4：处理完毕

另附http请求相应代码：

200: 请求成功
202: 请求被接受但处理未完成
400: 错误请求
404: 请求资源未找到
500: 内部服务器错误

status返回200，代表请求成功了。

2.@RequestParam方式传参

如果后端接口接收参数是采用@RequestParam注解接收参数，即URL-Encoded方式传参。

Tips:

@RequestParam用来处理 Content-Type 为 application/x-www-form-urlencoded 编码的内容，Content-Type默认为该属性。

示例代码如下：

//URL-Encoded方式传参 
const xhr = new XMLHttpRequest;
xhr.onloadend = function () {
    // 接收请求后端返回的数据
    let result = xhr.responseText;
    // console.log(result);
    // 由于大部分接口返回的数据都是JSON格式，所以需要转化
    const data = JSON.parse(result)
    console.log(data); // 可查看转化后的数据
    document.getElementById("Certificate").value = data.data.certificate;
}

var url = "https://www.baidu.com/getUserInfo";//地址为伪地址，随便写的

xhr.open("post", url);//如果是get请求，改成get即可
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//URL-Encoded params方式参数
// 参数设置在send里面，参数+值
var params = {"userName": "xiaohuihui", "pwd": "88888888"};
xhr.send("params=" + JSON.stringify(params).toString());//这里的key是params,value为一个JSON字符串

注意：

上面示例采用的是XMLHttpRequest的onloadend方法监听返回结果，也是可以的。XMLHttpRequest相关的监听事件有：

onabort：当request被停止时触发.

onerror：当request遭遇错误时触发。

onload：请求成功完成时触发。

onloadend：当请求结束时触发，无论请求成功（load）还是失败（abort 或 error）。

onloadstart：接受到响应数据时触发。

onprogress：当请求接收到更多数据时，周期性触发。

timeout： 在预设时间内没有接收到响应时触发

3.@RequestBody方式传参

先介绍一下@RequestBody的使用场景：

注解@RequestBody接收的参数是来自requestBody中，即请求体。一般用于处理非 Content-Type: application/x-www-form-urlencoded编码格式的数据，比如：application/json、application/xml等类型的数据。

就application/json类型的数据而言，使用注解@RequestBody可以将body里面所有的json数据传到后端，后端再进行解析。

示例代码如下：

const xhr = new XMLHttpRequest;
xhr.onloadend = function () {
    // 接收请求后端返回的数据
    let result = xhr.responseText;
    // console.log(result);
    // 由于大部分接口返回的数据都是JSON格式，所以需要转化
    const data = JSON.parse(result)
    console.log(data); // 可查看转化后的数据
    document.getElementById("Certificate").value = data.data.certificate;
}

var url = "https://www.baidu.com/getUserInfo";//地址为伪地址，随便写的

xhr.open("post", url);
// 设置请求头
xhr.setRequestHeader("Content-Type", "application/json");//json格式参数

// 参数设置在send里面，json格式参数
var params = {
    "userName": "xiaohuihui",
    "pwd": "88888888"
};
xhr.send(JSON.stringify(params));

与URL-Encoded传参方式不一样的地方，主要是请求头中Content-Type的值。