备赛记录-2

为了预防比赛现场出现意料之外的情况，能做的就是尽可能准备周全，所以尝试了很多数据请求的方式，在这里集中记录一下

更新ing

数据请求主要用的是axios和ajax

XHR （XMLHttpRequest） 基于XML的HTTP请求。XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

AJAX （Asynchronous JavaScript And XML）异步的JS和XML。原生XHR的封装,优势：AJAX 允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。AJAX 还允许异步工作，这意味着当网页的一部分正试图重新加载时，你的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

AXIOS AJAX的封装，基于promise 的网络请求库，可以用于浏览器和 node.js，功能比ajax更丰富，更好用

AJAX

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。不需要额外的操作，原生js就可以使用AJAX

XMLHttpRequest对象具体属性方法参考MDN WEB Docs

AJAX 基本数据请求

        // 事件绑定
        btn.onclick = function () {
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化
            // method:用于指定请求类型"GET"或"POST"
            // url:请求地址，绝对路径或相对路径
            // asyncFlag:请求方式，true为异步，false为同步
            xhr.open('GET', 'http://localhost:3000/test',true)
            // 发送
            xhr.send();
            // 事件绑定。处理服务端返回结果
            // readystate是xhrr对象中的属性，表示状态：0  1  2  3  4
            xhr.onreadystatechange = function () {
                // 判断服务端返回了所有的结果
                if (xhr.readyState === 4) {
                    // 判断响应状态码，2xx表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果
                        console.log(xhr.status);// 状态码
                        console.log(xhr.statusText);// 状态码字符串
                        console.log(xhr.getAllResponseHeaders);// 所有响应头
                        console.log(xhr.response);// 响应体
                    }
                }
            }
        }

AXIOS

Axios 是 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。使用需要引入或者npm下载

引入标签：

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

npm下载：

npm install axios
// 文件内
import axios from "axios";

Axios 基本使用

Axios返回的对象是一个Promise

        // 事件绑定
        btn.onclick = function () {
            // 简单的获取数据
            // 返回的是一个Promise对象
            const res = axios.get("http://localhost:3000/test");
            console.log(res);

            const res2 = axios.get("http://localhost:3000/test")
                .then(function (response) {
                    // 成功时返回
                    console.log(response);
                }).catch(function (error) {
                    // 失败时返回
                    console.log(error.response.data);         // 数据
                    console.log(error.response.status);        // 状态码
                    console.log(error.response.headers);    // 服务器响应头
                }).finally(function () {
                    // 无论失败or成功都是会返回
                })

        }

请求响应结构

{
  // `data` 由服务器提供的响应（数据）
  data: {},
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},
  // `config` 是 `axios` 请求的配置信息
  config: {},
  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

请求配置，详情参考：MDN WEB Docs

        // 事件绑定
        btn.onclick = function () {

            const res = axios({
                // 服务器URL，唯一的必填配置
                url: 'http://localhost:3000/test',
                // 创建请求时使用的方法，默认值get
                method: 'get',
                // 作为请求体被发送出去的数据，仅适用'PUT','POST','DELETE','PATCH'请求方法
                data: {
                    body: 'test'
                },
                // 请求超时的毫秒数，如果请求时间超过timeout的值，则请求中断。默认值0，永不中断
                timeout: 1000,
                // 代理服务商的主机名，端口，和协议
                proxy: {
                    protocol: 'http',
                    host: '127.0.0.1',
                    port: 9000,
                    auth: {
                        username: 'mikeymike',
                        password: 'rapunz3l'
                    }
                },
            })

        }