46.js的异步请求

在我们js中正是有了ajax技术,所以才有了前后端分离,ajax是指在不触发页面刷新的情况下,发出网络请求,拿到数据.

ajax

AJAX 是一种用于创建快速动态网页的技术。 AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个页面。 其实我们常用的库比如jQuery和axios中都有基于对ajax的封装

创建XMLHttpRequest对象

xhr=new XMLHttpRequest();

像服务器发送请求

包含send和opne方法

xhr.open(*method*,*url*,*async*)
xhr.send();

• method:请求类型
• url:请求地址
• async:是否为异步
• send('string') post携带的数据

post的请求头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

服务器响应

• responseText:响应内容
• responseXML :响应的xml
• readyState:请求状态.有0-4,常用的就是4,请求已经完成,响应以就绪
• onreadystatechange:readyState属性改变时调用的回调
• status:响应状态 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};

fetch

其实我们在异步请求中还有一种方式就是fetch,他是一个游览器自带的api,只是兼容性有点差. 其实fetch相对于xhr还是要简单很多的.

get请求

fetch(`api/search/user?name=aaa}`)

这样一个get请求就已经发出去了 他会返回一个Promise对象,这个Promise对象的结果就是是否成功连接上服务器. 如果我们需要服务器返回结果需要去这个对象上的json方法中取但是这个json方法也是一个Promise对象,所以我们需要获取这个Promise的执行结果才能获取最后的数据.

    fetch(`api/search/user?name=aaa`)
      .then((res) => {
      // 在这里执行json方法,并return出结果的Promise
        return res.json();
      })
      .then((data) => {
      // 获取最终结果
        console.log(data);
      })
      .catch((err) => {
      // 捕获全局错误
        console.log(err);
      });

简化版,利用asybc和await

asycn...
  const res = await fetch(`api/search/user?name=aaa`);
  const data = await res.json();

post请求

在fetch第二个参数为一个对象,内容为请求格式,内容,请求头,请求参数等

fetch("api/add/user", {
  method: "POST",
  headers: {
      "Content-Type": "application/json",
  },
  body: JSON.stringify({
      name: "aaa"
  })
})