[JavaScript知识库]封装的ajax，原生的fetch，更强大的axios

今天整理下常用的三种请求数据的方法

首先是最基础的ajax请求方式

function core(defaultOption, resolve, reject) {
  // 解构赋值获取对象里的数据
  let { data, url, method, async, headers, success, error, responseType } =
    defaultOption;

  // 创建ajax
  let xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("microsoft.XMLHTTP");
  }

  // 根据不同情况转换成各类格式的data参数
  let params = "";

  // data数据转换
  if (JSON.stringify(data) !== "{}") {
    for (k in data) {
      params += k + "=" + data[k] + "&";
    }
    params = params.substr(0, params.length - 1);
  }

  // 建立请求
  xhr.open(
    method,
    url + (!!params && method === "get" ? "?" + params : ""),
    async
  );

  // header判断
  if (typeof headers === "object") {
    if (JSON.stringify(headers) === "{}") {
      error("请求头传递的是一个空对象", xhr);
    }
  } else {
    if (async) reject("headers expected object but got a " + typeof headers);
    throw new Error("headers expected object but got a " + typeof headers);
  }

  // post /json 传参时的方式
  for (h in headers) {
    if (
      h.toLowerCase() == "content-type" &&
      method === "post" &&
      JSON.stringify(data) !== "{}"
    ) {
      if (headers[h].toLowerCase() === "application/json") {
        params = JSON.stringify(data);
      }
    }
    // 设置请求头
    xhr.setRequestHeader(h, headers[h]);
  }

  // 发送请求
  xhr.send(method !== "post" ? null : params);

  // 如果是同步,这里就直接返回结果
  if (!async) {
    return responseType === "json"
      ? JSON.parse(xhr.responseText)
      : xhr.responseText;
  }

  // 响应
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        let res = xhr.responseText;
        switch (responseType.toLowerCase()) {
          case "text":
            success(res);
            resolve(res);
            break;
          case "json":
            success(JSON.parse(res));
            resolve(JSON.parse(res));
            break;
          default:
            success(res);
            resolve(res);
        }
      }
    }
  };

  xhr.onerror = function (e) {
    error(e, xhr);
    reject(e, xhr);
  };
}

function ajax(options) {
  // 判断是否传入的是一个对象
  let isObject = Object.prototype.toString
    .call(options)
    .replace(/[\[\]]/g, "")
    .substr(7)
    .toLowerCase();

  if (isObject !== "object") {
    throw new Error(
      "传入的必须是一个对象, the param expected a object,but got a " + isObject
    );
  }

  // 设置默认参数
  let defaultOption = {
    url: "",
    method: "get",
    responseType: "json",
    data: {},
    async: true,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    success: function (res) { },
    error: function (e) { },
  };

  // 传入对象和默认对象混合
  for (k in options) {
    defaultOption[k] = options[k];
  }

  // 同步异步判断
  if (defaultOption.async === false) {
    return core(defaultOption);
  } else {
    return new Promise((resolve, reject) => {
      core(defaultOption, resolve, reject);
    });
  }
}

这是一个使用XMLHttpRequest对象的ajax请求方式。

再就是原生的fetch

          fetch("http://www.chst.vip/users/login", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              username: "lbw",
              password: "555",
            }),
          })
            .then((response) => response.json())
            .then((data) => console.log(data));

?fetch 不能接受参数是object形成(data = { title:'1',val:'2'})，可以接受JSON.stringify(data)形式的，不过前后端需要同时修改 Content-Type: 'application/json'。

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

更强大的axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});


export const loginApi = (username, password) =>
  axios.post("/api/users/login", {
    username,
    password,
  });

//获取验证码

export const getCaptchaApi = () => axios.get("/api/users/getCaptcha");

//校验验证码

export const verifyCaptchaApi = (captcha) =>
  axios.get("/api/users/verifyCaptcha", {
    params: {
      captcha,
    },
  });

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

自己学习用
?

?