前端工程化前置

AJAX是异步的JavaScript和xML（AsynchronousJavaScriptAndXML）。简单点说，就是使用 XMLHttpRequest对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJA×最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

怎么用AJAX？

1．先使用axios库，与服务器进行数据通信基于XMLHttpRequest封装、代码简单、月下载量在14亿次 Vue、React项目中都会用到axios 2.再学习XMLHttpReguest对象的使用，了解AJAX底层原理

语法：

引入 axios.js: https://cdn.isdelivr.net/npm/axios/dist/axios.min.js
使用axios函数
- 传入
- 再用.then回调函数接收结果，并做后续处理

配置对象

如果是get请求，参数配置为

{
	url:"",
	method:"get",
	params:{
		usr:"jbsd",
		pwd:"schs"
	}
}

如果是post请求，请求参数应该这么写

{
	url:"",
	method:"get",
	data:{
		usr:"jbsd",
		pwd:"schs"
	}
}

axios错误处理

语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参

form-serialize插件

作用：快速收集表单元素的值

AjAx原理-XMLHttpRequest

定义： XMLHttpRequest（XHR）对象用于与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest在 AJAX编程中被大量使用。关系：axios内部采用xMLHttpRequest与服务器交互

使用XMLHttpRequest 步骤：

创建XMLHttpRequest对象
配置请求方法和请求url地址
监听loadend事件，接收响应结果
发起请求

const xhr = new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener("load",()=>{
	console.log(xhr.response)
})
xhr.send()

XMLHttpRequest-数据提交

需求：通过XHR提交用户名和密码，完成注册功能核心：请求头设置Content-Type：application/jsor

请求体携带JSON字符串

Promise

Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。

Promise-链式调用

概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果好处：通过链式调用，解决回调函数嵌套问题

async函数和await

定义： async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例，并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。

Promise.all 静态方法

概念：合并多个Promise对象，等待所有同时成功完成（或某一个失败），做后续逻辑

跨域问题

在前端发出Ajax请求的时候，有时候会产生跨域问题

针对以上问题，本文提供两种解决方案，CORS中间件和JSONP方法。

在具体介绍解决方法之前，我们先明确以下前提条件：

1、这两个方法都需要通过后端修改接口情况，无法单独通过前端解决跨域问题。

2、什么是跨域？什么情况会出现跨域？

答：当浏览器发起Ajax请求时，如果所请求的url和当前的url的协议、域名、端口存在任意不同，就会产生跨域问题。比如我在这个地址file:///C:/Users/%E8%8A%.html，协议为file协议，如果请求http协议的文件，自然就会出现跨域问题。

3、当我们使用script、img、herf加载内容时不会出现跨域问题