用dw制作网站建设,陕西网站建设维护,免费下载公众号,人力管理系统1、实现逻辑
Promise XMLHttpRequest 封装
① 返回一个 promise 实例
new XMLHttpRequest 并设置默认请求方式、请求根路径#xff1b;
添加请求响应事件#xff1b;
根据状态码#xff0c;对应执行成功或者失败的调用函数#xff0c;并把结果传进去#xff1b; ② …1、实现逻辑
Promise XMLHttpRequest 封装
① 返回一个 promise 实例
new XMLHttpRequest 并设置默认请求方式、请求根路径
添加请求响应事件
根据状态码对应执行成功或者失败的调用函数并把结果传进去 ② 处理 params
如果有 params就 new URLSearchParams() 对象并把传进来的 params 传到对象里
再用 toString 方法转成 URL 编码字符串最后再拼接 url 来覆盖 url 默认值 ③ 处理 data
如果有 data就 xhr.setRequestHeader 设置请求头的请求数据类型
比如 JSON 字符串就还需要用 JSON.stringify 转成 JSON 字符串
最后传到 send 携带 JSON 字符串发起请求 2、封装代码 // 实现简易的axios function myAxios(config) {return new Promise((resolve, reject) {// 实例化xhrconst xhr new XMLHttpRequest()// 默认get请求let { methods get, url, params , headers , data } config// 将传入的params对象转成URL编码字符串if (params) {const parseParams new URLSearchParams(params)url ?${parseParams.toString()}}// 设置请求方法请求地址xhr.open(methods, url)// 设置请求头if (headers) {Object.keys(headers).forEach((key) {xhr.setRequestHeader(key, headers[key])})} else {xhr.setRequestHeader(Content-Type, application/json)}// 添加请求响应事件xhr.addEventListener(loadend, () {if (xhr.status 200 xhr.status 300) {// 成功resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})// data对象if (data) {// 设置请求头请求数据类型设置为 JSON 字符串xhr.setRequestHeader(Content-Type, application/json) // 转 JSON 字符串// 构造参数const jsonDate JSON.stringify(data)// 发起请求xhr.send(jsonDate)} else {// 发起请求xhr.send()}})} 3、使用 // 使用myAxios({methods: get,url: /1.json,headers: {token: 123},params: {name: strawberry,age: 18,},// data: {// name: strawberry,// age: 18,// },}).then((res) {console.log(成功, res);}).catch((err) {console.log(失败, err);});
