封装属于自己的ajax请求-2021/11/14

博主：鼎g
发布时间：2021 年 11 月 14 日
1209 次浏览
暂无评论
2004字数
分类：胡乱教程

```JavaScript
function itheima(options) {
  // 创建构造函数
  const xhr = new XMLHttpRequest();
  // 打印形参
  console.log(options);
  // 打印 看看
  //   console.log(options.params);
  // 如果查询参数有值  判断查询还是新增
  if (options.params) {
    // console.log(options.params);
    //   定义数组 装着对象的值
    let qs = [];
    // 遍历对象获取key
    for (let key in options.params) {
      // 获取键
      //   console.log(key);
      // 获取值
      //   console.log(options.params[key]);
      //   将键值对拼接 添加到数组中
      qs.push(`${key}=${options.params[key]}`);
    }
    //   打印看看qs数组的值
    console.log(qs);
    if (qs.length > 0) {
      // 看看join 转换后的拼接的字符串
      //   console.log(qs.join('&'));
      // 把 options.url的值 赋给 xhr.open()
      //   options.url = options.url + `?${qs.join('&')}`;
      //   简化写法
      options.url += `?${qs.join('&')}`;
      // 打印看看
      //   console.log(options.url);
    }
  }

// 将形参中的值 请求方法 请求地址 放入请求中
  xhr.open(options.method, options.url);

// 判断请求类型

//   先把用户输入的请求方式 转为大写字母 并且 不是GET请求 并且 有data新增对象
  if (options.method.toUpperCase() !== 'GET' && options.data) {
    //   1.判断是否为 FormData
    if (options.data instanceof FormData) {
      console.log(options.data);
      xhr.send(options.data);
    }

//   2.判断data是否为字符串类型
    else if (typeof options.data === 'string') {
      // 定义请求类型
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send(options.data);
    }

// 3.判断data是否为对象类型
    else if (typeof options.data === 'object') {
      // 定义请求类型
      xhr.setRequestHeader('Content-Type', 'application/json');
      //   xhr.send(options.data);
      xhr.send(JSON.stringify(options.data));
    }
  } else {
    xhr.send();
  }
  // 发送请求
  // 监听结果
  xhr.addEventListener('load', function () {
    // console.log(JSON.parse(xhr.response));
    //   将结果字符串转为对象
    const res = JSON.parse(xhr.response);
    // 返回给 success 函数  传实参
    options.success(res);
  });
}
```

最后修改：2022 年 05 月 02 日

END

本文作者：鼎g
文章标题：封装属于自己的ajax请求-2021/11/14
本文地址：https://zhougewk8.cn/10.html
版权说明：若无注明，本文皆Dg's Blog-专注健康快乐每一天原创，转载请保留文章出处。