HTTP请求使用示例

fetch 使用

//异步请求数据fetch方法

async function main() { // async关键字，只能用于function,表示这个是异步函数

  // fetch是全局函数，用于发送http请求，接收两个参数

  // 第一个参数：地址或一个 Request 对象

  // 第二是可选配置参数

  let resp = await fetch('http://127.0.0.1:8080/study1/exercise/test.json', {

    method: 'get', // 请求使用的方法，如果是上传数据就是’Post‘或’Put‘

   body: JSON.stringify(data),//’Post‘或’Put‘才能有body，里面放上传的数据
  });

  let data = await resp.json();

  console.log('fetch  json()', data);

}

main();

---

XMLHttpRequest 使用

//创建xhr对象

let xhr = new XMLHttpRequest();

//接收三个参数：请求方法，地址，和是否异步的布尔值

xhr.open('get', 'http://127.0.0.1:8080/study1/exercise/test.json'，true);

xhr.send(null);

//readystatechange监听接收状态

xhr.addEventListener('readystatechange', evt => {

  let {readyState} = xhr;

  if (readyState !== 4) return;

  console.log('xhr', xhr);

});

---

优缺点对比

XMLHttpRequestZ

优点：

• 能够知道发送状态与上传状态，检测请求进度
• 可以配置或取消请求

缺点: 使用比较麻烦

fetch

优点：

• 简洁，方便
• 使用 Promise 避免回调地狱

缺点：没有办法原生监测请求的进度，而XHR可以。