XHR

var xhr = new XMLHttpRequest(); //创建发送请求的对象
xhr.onreadystatechange = function(){ //当请求状态发生改变时运行的函数
   // xhr.readyState： 一个数字，用于判断请求到了哪个阶段
   // 0: 刚刚创建好了请求对象，但还未配置请求（未调用open方法）
   // 1: open方法已被调用
   // 2: send方法已被调用
   // 3: 正在接收服务器的响应消息体
   // 4: 服务器响应的所有内容均已接收完毕
   
   // xhr.responseText： 获取服务器响应的消息体文本

   // xhr.getResponseHeader("Content-Type") 获取响应头Content-Type
}
xhr.open("请求方法", "url地址"); //配置请求
xhr.setRequestHeader("Content-Type", "application/json"); //设置请求头
xhr.send("请求体内容"); //构建请求体，发送到服务器，如果没有请求体，传递null

Fetch

const resp = await fetch('url地址', { // 请求配置对象，可省略，省略则所有配置为默认值
  method: '请求方法', // 默认为GET
  headers: { // 请求头配置
    'Content-Type': 'application/json',
    'a': 'abc' 
  },
  body: '请求体内容' // 请求体
}); // fetch会返回一个Promise，该Promise会在接收完响应头后变为fulfilled

resp.headers; // 获取响应头对象
resp.status; // 获取响应状态码，例如200
resp.statusText; // 获取响应状态码文本，例如OK
resp.json(); // 用json的格式解析即将到来的响应体，返回Promise，解析完成后得到一个对象
resp.text(); // 用纯文本的格式解析即将到来的响应体，返回Promise，解析完成后得到一个字符串

首先fetch返回的是一个promise对象，当请求返回响应头的时候promise会变成完成状态，若此时想继续获取响应体应该调用.json()方法。一般做法为

const resp = fetch('url').then((res) => { return res.json()}).then((res) => {console.log(res)})

此时得到的resp就为响应体。

axios

axios是一个第三方库，主要用来完成网络请求的发送。

axios.get("url").then(resp=>{
  console.log(resp.data); // resp.data 为响应体的数据，axios会自动解析JSON格式
})

axios返回的也是一个promise对象，和fetch不同的是，axios完成后返回的数据中就已经包含响应头，响应体以及状态码等等，而fetch完成后只返回响应头，并且需要调用后续方法继续获取响应体。且aixos返回的响应体会自动解析成JSON格式

网络请求（XHR,fetch,axios)相关

XHR

Fetch

axios