数组批处理

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" ,content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script>
    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

/* 遍历数组 */
// arr.forEach(
//     item => console.log(item)
// )

/* map:映射出平方数形成的新数组 */
// const na = arr.map(
//     item => item*item
// )
// console.log(na);

/* filter:过滤出3的倍数 */
// const na = arr.filter(
//     item => (item%3===0)
// )
// console.log(na);

/* some：arr是否有3的倍数 */
// const bool = arr.some((item) => {
//   console.log("item", item);
//   return item % 3 === 0;
// });
// console.log(bool);

/* every: arr中是否人人都是3的倍数 */
// const bool = arr.every((item) => {
//   console.log("item", item);
//   return item % 3 === 0;
// });
// console.log(bool);

/*
ajax
A 异步地
J 使用JS发起http请求
A 并且在数据回来时（异步事件）
X 渲染XML/HTML

跨域三招
+ 服务端配置响应头：Access-Control-Allow-Origin:*
+ JSONP: script标签的src属性不受同源策略(CORS-policy)限制 +返回的内容当做JS代码立即执行： onDataGot({一个海量的JSON数据})
+ 配置代理： 让服务器替你访问/Nginx
http {
    ...
    server {
        ...
        location /mul {
            proxy_pass http://localhost:8000/calc/multiply
        }
    }
}
*/

function objToParams(obj) {
  let str = "";
  for (let key in obj) {
    str += `&${key}=${obj[key]}`;
  }
  // &name=heige&pwd=123456
  return str.slice(1);
}

function ajax({ url, method, dataType, data, onSuccess, onFail }) {
  let reqBody = null;

  /*  */
  method = method || "GET";
  onSuccess = onSuccess || ((data) => console.log("defaultSuccess:data", data));
  onFail = onFail || ((err) => console.log("defaultFail:err", err));

  const xhr = new XMLHttpRequest();
  xhr.open(method, url);

  /* dataType */
  switch (dataType) {
    case "form":
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      reqBody = objToParams(data);
      break;
    case "json":
      xhr.setRequestHeader("Content-Type", "application/json");
      reqBody = JSON.stringify(data);
      break;
    default:
      break;
  }

  xhr.onload = function () {
    onSuccess(xhr.responseText);
  };
  xhr.onerror = function (err) {
    onFail(err);
  };

  xhr.send(reqBody);
}

// ajax({
//   url: "http://www.httpbin.org/post",
//   method: "POST",
//   dataType: "form",
//   data: { name: "heige", pwd: "123456" },
//   onSuccess: (data) => console.log("data=", data),
//   onFail: (err) => console.log("err=", err),
// });

function ajaxPromise(config) {
  return new Promise((resolve, reject) => {
    ajax({
      ...config,
      onSuccess: (data) => resolve(data),
      onFail: (err) => reject(err),
    });
  });
}

ajaxPromise({
  url: "http://www.httpbin.org/post",
  method: "POST",
  dataType: "form",
  data: { name: "heige", pwd: "123456" },
  // onSuccess: (data) => console.log("data=", data),
  // onFail: (err) => console.log("err=", err),
})
  .then((data) => console.log("data=", data))
  .catch((err) => console.log("err=", err));

</script>
</body>
</html>
posted @ 2022-08-08 22:51  禅心佛子  阅读(171)  评论(0)    收藏  举报