最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

原生js如何请求接口 今日报

来源：博客园


(相关资料图)

====>请求基本流程：创建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()方法里面的参数传值为nullxmlHttp.send(null)// post请求中send()方法里面的参数传值为json格式xmlHttp.send("{"test":123}")

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

对象实例里面的属性
属性名含义
responseText服务端返回的文本信息
responseXML服务端返回的XML DOM文档
statusHTTP状态码
statusTextHTTP状态码说明
readyStatexhr对象的请求响应阶段
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")    })

关键词：