JS发HTTP请求的方法

本文章仅作为个人学习过程的记录，知识点梳理，若有不严谨、不正确、需要补充的地方欢迎指出。

AJAX

先创建一个HTTP请求

const Http = XMLHttpRequest();

确定请求要发送到的url

cosnt url = 'https://segmentfault.com';

然后整合，发送请求

Http.open('GET', url, true); // 用于初始化一个请求，method，url，async
Http.send(); // 用于发送请求，调用后请求才会真的发出

POST请求时，需要处理请求参数，需要更新的数据data作为send()的参数。

Http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 来设置请求头
Http.onerror = function(){}; // 来处理异常
Http.abort(); // 终止一个请求，调用后readyState变为0

response 响应的正文，返回类型由responseType决定
responseType 响应的数据类型，默认为text，可手动设置为"", "json", "text", "document", "blob", "arraybuffer"

事件回调
onreadystatechange 事件监听器对请求结果进行操作，属性变化时触发

Http.onreadystatechange = (e) => {
    console.log(Http.response);
}

判断请求是否成功有两个属性，readyState和Status

Http.onreadystatechange = (e) => {
    if(this.readyState === 4 && this.status === 200) {
        console.log(Http.responseText);
    }
}

readyState有五种值：

• 0：UNSEND => 已创建，但open()还未被调用
• 1：OPENED => open()已被调用
• 2：HEADERS_RECEIVED => send()已被调用，headers和status可用
• 3：LOADING => 加载中，拥有部分数据
• 4：DONE => 完成

onloadstart 在ajax请求之前(1 <= readyState <= 2)触发
onprogress 用资源总大小total和已经加载的大小loaded，计算加载进度
onload 资源加载完成触发，在其中处理返回值
onerror 资源加载失败触发，处理错误
ontimeout 请求超时调用，超时时间用timeout属性设置

优点：

• 所有浏览器都支持
• 原生的浏览器api，不需要引入外部代码（插件，组件）
• 成熟稳定
• 向后兼容

缺点：

• 接口复杂，代码量较大
• 容易陷入回调地狱

JQuery

需要先引入jquery库才可以使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1. $.ajax
   最简单的方法之一，多个参数可选。get，post等都可实现。

    $.ajax({
      url: 'https://segmentfault.com',
      type: 'GET', // or POST
      // data: data, // if the type is POST
      //dataType: JSON or HTML, XML, TXT, jsonp
      success: function(result) {
        console.log(result)
      },
      error: function(err) {
        console.log(err)
      }
    })

2. $.get
   用来执行GET请求，有两个参数 端点和回调函数

    $.get(url, function(data, status){
        console.log(`${data}`);
    })

3. $.post
   用来执行POST请求，有三个参数 端点，发送的数据和回调函数

    $.post(url, data, function(data, status){
        console.log(`${data} and status is ${status}`);
    })

4. $.getJSON
   仅用于获取json格式数据

    $.getJSON(url, function(result){
        console.log(`${result}`);
    })
   

优点：

• Good support and documentation 社区支持和文档都很好
• 可配置
• 大量项目在使用
• 学习曲线低
• 可中止ajax请求，因为返回的是XMLHTTPRequest对象

缺点：

• No working with promises 不支持Promises
• 非浏览器原生API
• 与原生Fetch不兼容

Fetch

一个功能强大的新的web API， 能发起异步请求。返回一个Promise对象，可以更聪明的处理异步请求。Promise详细介绍可查看ES6中Promise章节。

fetch(url, {
    method: "POST", // or GET
    headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
    },
    body: JSON.stringify(params), // POST时，传递更新数据，GET不需要
})
.then(data => {return data})
.catch(error => {return error})

优点：

• 浏览器原生 API
• Fetch 是xmlhttprequest的加强版
• 使用 promises 防止回调地狱
• 无需依赖项
• 易学易用
• 主流浏览器都支持

缺点

• 处理json数据时需要分成两步走。第一步是要发送请求，第二步需要调用json()方法。而在axios你能默认返回json.
• 在当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
• 缺少abort，cancel等功能
• fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
• fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改

Axios

开源的创建HTTP请求的库，也是返回一个Promise。首先要引入axios才能使用。
终端/命令行输入

npm install axios --save

文件中引入

import axios from 'axios'

或

<script src='https://unpkg.com/axios/dist/axios.min.js'></script>

基于axios，可以使用GET和POST来请求和发送数据
GET:

axios.get(url, params) // params 条件请求参数，可不填
.then(data => {console.log(data)})
.catch(err => {console.log(err)})

POST:

axios({
method: 'post', 
url: url, 
Content-Type: 'application/json', // multipart/form-data, application/x-www-form-urlencoded
data: {updateData}})
.then(data => {console.log(data)})
.catch(err => {console.log(err)})

优点：

• 使用promises以防止回调地狱
• 浏览器及node.js都适用
• 支持上传进度
• 可以设置响应超时
• 只需将配置对象传递给它即可配置您的请求
• Axios 已经实现了可取消的 promise 提案
• 自动将数据转换为 JSON

缺点：

• 非原生API

其他

Qwest
SuperAgent
Http-client
SWR —— 虽然已经可以使用，但并不完善，使用过程中会出现问题。

---

参考资料：

1. https://chinese.freecodecamp....
2. https://cynthia0329.github.io...
3. https://www.mzh.ren/comparing...