JS异步请求

异步请求

相比与传统的 同步请求(往往会伴随页面的跳转)， 效率更高，可以再请求的过程中，对网页进行继续的处理
异步请求 可以实现页面的 局部刷新，可以节约带宽

工作原理

异步请求的实现方式

• 原生JS (了解)

• jquery ajax (使用 jQuery库)

• fetch (ES6 新增的，本次项目需要掌握的)

• axios (比较强大的 axios 库)

• 其它方法

原生 JS 实现异步请求

一个核心对象、三个方法、四个属性

// 1. 创建一个核心对象  XMLHttpRequest (不支持低版本的IE)

let xhr = false ;
try{
    xhr = new XMLHttpRequest();
}catch(e) {
    // 使用 IE 创建方式
    xhr  = new ActiveXObject("microsoft.XMLHTTP") ;
}


// 2. 和服务器建立链接
// url : 代表要访问的 请求地址 
// method : 代表要方法的 请求方式
xhr.open(method , url);


// 3. 设置请求的头信息
// name = Content-Type , value 值为 application/x-www-form-urlencoded
xhr.setRequestHeader(name , value) 

// 4. 发送请求到服务器 ，并可以携带数据 
// param 是一个字符串，参数的个格式  a=1&b=2&c=3,  POST请求才支持传参， 如果没有参数，设置未 null 即可
xhr.send(param)


// 5. 通过 onreadystatechange 监听服务器响应信息 , 值是一个回调函数

xhr.onreadystatechange = function() {

    // 6.  获取 客户端和服务器 的链接状态 
    /*
        xhr.readyState 有 5个值 
            0 ： 未建立链接， xhr 还没有调用 open 方法
            1 ： 链接已建立， xhr 已经调用了 open 方法
            2 :  请求已发送， xhr 已经调用了 send 方法
            3 :  服务器正在处理数据、但未完成响应
            4 :  服务器已响应完成 
    */
    let  state = xhr.readyState ; 
    
    
    // 判断 状态是否4 
    if (state == 4)  {
            // 获取 服务器 返回的状态码  xhr.status
            /**
                200 : 服务器正常响应数据 
                201 : 新增数据成功
                204 ： 没有内容, 一般用于 删除成功
                301/302 : 永久/临时 重定向
                304 ： 数据没有改变，通常代表 浏览器缓存了数据
                400 :  通常是请求参数 不正确 
                401 :  没有认证 （访问没有授权的资源）
                403 :  禁止访问 
                404 :  页面找不到 
                405 :  请求方式不正确
                500 :  服务器代码产生异常
            */
            if (xhr.status == 200) {
                   
                   // 获取 服务器响应的数据， 返回的是一个 字符串
                  xhr.responseText  
            }
    
    }
    
}

ES6 使用 fetch 实现 异步请求

• get 请求

fetch(url)
    .then(response => response.json())
    .then(data => {  ... })   // data 就是 接口返回的 JSON数据

fetch 返回的结果是一个 Promise(承诺)对象，如果成功通过then处理，失败通过catch进行处理
then() 代表 成功获取结果后执行的回调函数，所以 then 里面需要传入一个 回调函数
then中的回调函数 会传入一个 response响应对象，因为异步请求通常返回的数据格式是json格式，所以再 then的回调函数中返回 response.json() 即可
继续对 then 返回的结果 调用 then 或者 catch
catch() 代表 失败 获取结果执行的回调函数，catch 要求传入一个回调函数
then() / catch() 方法 返回的结果仍旧是一个 Promise对象

fetch 第一次调用 then ，无论请求返回的状态码是多少，都会进入， 只有接口无法访问 才会执行 catch , 所以通常需要开发人员再第一个then中处理状态码

• post 请求

var form = document.querySelector('form')

fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})