前端请求接口方式

前言：

        请求常用配置项，此文章用于记录待使用时方便查看！

AJAX请求

 let xml = new XMLHttpRequest();
  // method 请求类型（get、post） url 接口 BooleanVal 异步（true） 同步(false)
  xml.open(method, url, BooleanVal);
  // 将请求发送到服务器  string 仅用于POST请求
  xml.send(string);
  // 当请求被发送到服务器时 当readyState改变时就会触发onreadystatechange事件
  xml.onreadystatechange = function () {
    // readyState 属性存有 XMLHttpRequest 的状态信息
    // 0 请求未初始化 1 服务器连接已建立 2 请求已接受 3 请求处理中 4 请求已完成，且响应已就绪
    if (xml.readyState == 4 && xml.status == 200) {
      //使用XMLHttpRequest 对象的 responseText 或 responseXML 属性 获取服务器的响应
      console.log(xml.responseText);
    }
  };

// 携带参数时
  //GET请求 在 url 上进行拼接
  xml.open("GET", "url?name=LI&sex=1");
  // POST请求 例发送表单格式的数据
  xml.open("POST", "url");
  xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xml.send("name=LI&sex=1");

JQuery 中的ajax

$.ajax({
    //请求方式(post、get)默认为get
    type: "GET",
    //接口
    url: url,
    //设置请求超时时间（毫秒）
    timeout: 5000,
    //默认为true(异步)，若想设置为同步，设置为false
    async: Boolean,
    //cache默认为true(当dataType为script时，默认为false),
    //设置为false将不会从浏览器缓存中加载请求信息
    cache: Boolean,
    // 请求头 例：Authorization
    headers: {
      Authorization: "token 值",
    },
    // 要发送到服务器的数据
    data: Object | String,
    // 预期服务器返回的数据类型 如果不指定返回responseXML或responseText
    // 可选值：html、xml、script、json、jsonp、text
    dataType: String,
    // 发送请求前可以修改XMLHttpRequest对象的函数，例：添加请求头，
    // 在该函数中返回false 可以取消本次ajax请求
    beforeSend: Function,
    // 请求完成后调用的回调函数（请求成功或失败时均调用）
    complete: Function,
    // 请求成功后调用的回调函数
    success: Function,
    // 请求失败时调用的回调函数
    error: Function,
    // 发送信息至服务器时内容编码类型 默认为 application/x-www-form-urlencoded
    contentType: String,
  });

axios 请求  请求配置 | Axios中文文档 | Axios中文网

  axios({
    url: "",
    method: "get", //默认值get
    baseURL: "", //baseURL将自动加在url前面，除非url是一个绝对url
    // 自定义请求头
    headers: {},
    // 是与请求头一起发送的url参数
    params: {},
    // 作为请求体被发送的数据 仅适用于put、post、patch、delete
    data: {},
    //发送请求头数据的可选语法，请求方式post 只有value会被发送，key则不会
    data: "Country=Brasil&City=Belo Horizonte",
    // 请求超时的毫秒数
    timeout: 1000,
    // 表示跨域请求时是否需要使用凭证
    withCredentials: false,
    // 表示浏览器将要响应的数据类型
    responseType:'json'//默认值
  });