原生js如何发送请求接口，ajax封装

====>请求基本流程：创建XHR实例对象 => 发送数据 => 接收数据

首先我们会创建xml实例对象

let xmlHttp = new XMLHttpRequest()

需要根据不同版本浏览器创建

if (window.XMLHttpRequest) {
        //code for all new browsers
        xmlHttp = new XMLHttpRequest;

    } else if (window.ActiveXObject) {
        //code for IE5 and IE6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

调用xhr对象上的 open() 方法，创建一个请求

open（）方法里面接收三个参数

• 第一个参数（必填）： 请求类型（主要两个POST,GET）
• 第二个参数（必填）： 请求的URL地址
• 第三个参数（默认true）： 是否异步发送请求（true:异步请求；false:同步请求）

根据项目需求，加上请求头

// 设置content-Type，后端传给前端为JSON格式数据
xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
// 这个是用来解决跨域
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*");

最后就是发送请求啦

// get请求中send()方法里面的参数传值为null
xmlHttp.send(null)
// post请求中send()方法里面的参数传值为json格式
xmlHttp.send("{"test":123}")

请求发送出去后，客户端需要接收服务器响应回来的数据，

对象实例里面的属性

属性名	含义
responseText	服务端返回的文本信息
responseXML	服务端返回的XML DOM文档
status	HTTP状态码
statusText	HTTP状态码说明
readyState	xhr对象的请求响应阶段

readyState里面状态码含义

• 0： 还未创建请求，即未调用 open() 方法
• 1： 已调用 open() 方法，但未发送 send() 方法
• 2： 已调用 send() 方法，但未接收到响应
• 3： 已接收到部分响应
• 4： 已接收到全部的响应

---

如果readyState === 4 且 status === 200 就是成功，两个可以分开判断，先判断readyState在进行status判断

废话不多说，直接上代码，完整代码 如下：

var xmlHttp = null;
var requestData = ""

/**
 * @param requestData 请求参数
 * @param callBack
 *
 *
 * 调用示例
 * httpRequest{
 *   {
 *     method:"post"
 *     url:"http://localhost:8080/login"
 *     data:{
 *         userName:"张三",
 *         passWord:"123456"
 *     }
 *   },function (res){
 *     //处理成功回调
 * },function (err){
 *     //处理失败回调
 * }
 * }
 */

function httpRequest(requestObj,successFun,failFun) {
    let { url:httpUrl, method, data, async } = requestObj

    xmlHttp = checkBrowser(xmlHttp);

    //请求方式， 转换为大写
    var httpMethod = (method || "Get").toUpperCase();
    //post请求时参数处理
    if (httpMethod === "POST") requestData = JSON.stringify(data)

    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            // 请求成功的回调函数
            successFun(JSON.parse(xmlHttp.responseText));

        } else {
            //请求失败的回调函数
            failFun(JSON.parse(xmlHttp.responseText));
        }
    }

    // 发送请求
    sendRequest(httpUrl, requestData, httpMethod, async );
}

/**
 * 校验浏览器创建xmlHttp对象
 * @param xmlHttp
 */
function checkBrowser(xmlHttp) {
    //创建 XMLHttpRequest 对象，老版本的 Internet Explorer （IE5 和 IE6）
    //使用 ActiveX 对象：xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
    if (window.XMLHttpRequest) {
        //code for all new browsers
        xmlHttp = new XMLHttpRequest;

    } else if (window.ActiveXObject) {
        //code for IE5 and IE6
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // console.log(xmlHttp)
    return xmlHttp;
}

/**
 * 发送请求
 * @param xmlHttp
 * @param requestData
 */
function sendRequest(httpUrl, requestData, httpMethod, async) {

    if (httpMethod === "GET") {
        xmlHttp.open("GET", httpUrl, async);
        xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlHttp.send(null);
    } else if (httpMethod === "POST") {
        xmlHttp.open("POST", httpUrl, async);
        xmlHttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "*"); // 用来解决跨域
        xmlHttp.send(requestData);
    }
}

示例post请求

function getBalanceApi() {

    return new Promise((resolve,reject)=>{
        httpRequest({
            method:"post",
            url:"http://192.168.19.192:8081/huayuan/get_lock_store_result",
            data:{
                orderNo:"83375ad7d7959612"
            },
            async:true,

        },(res)=>{
            resolve(res)
            console.log(res)
        },(err)=>{
            reject(err)
        })
    })
}

在对应功能里获取数据

getBalanceApi().then((res)=>{
   // 获取成功返回数据
    console.log(res,"res")
}).catch((err)=>{
    // 获取失败返回数据
    console.error(err,"res")
})

本人前端小白，如有什么不足欢迎各位大佬来补充，