AJAX&Axios知识总结

一、AJAX
1.概念
​ AJAX（Asynchronous Javascript And XML）翻译成中文就是“**异步的Javascript和XML**”。
​ 通俗理解：在网页中用到XMLHttpRequest（简称xhr）对象了就是Ajax， 是为了和服务器之间进行数据交互（传输）的。
​ 为什么要学习Ajax：之前所学的技术，只能把页面做的更美观漂亮，或添加一些动画效果，但是Ajax能让我们轻松实现网页与服
务器之间的数据交互
2.作用
​ 1.**与服务器进行数据交换**：通过AJAX可以给服务器发送请求，并获取服务器响应数据。使用了AJAX和服务器进行通信，就
可以使用HTML+AJAX来替换JSP页面了。 ​ 2.**异步交互**：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部
分网页的技术，如：搜索联想、用户名是否可用、校验，等等。
3.ajax的优势
1 . 原生js 就可以使用，不需要插件的支持
2 . 用户体验好，**页面不需要刷新就可以更新数据**
3 . 减少服务端和带宽的负担
4.ajax的使用
1 . 创建一个ajax对象 new XMLHttpRequest（）
2 . 配置这个对象–open
3 . 发送请求—send
4 . 接受相应 onload或者onreadystatechange事件监听
创建一个ajax对象

let xhttp=new XMLHttpRequest()

配置这个对象--xhttp.open(请求方式，请求地址，同步还是异步

xhttp.open('get', 'https://www.baidu.com')
//第三个参数默认是异步

发送请求

xhttp.send()

接受返回过来的数据
​ 要想接收到响应，必须遵从下面条件:
1 . 本次HTTP请求是成功的，也就是我们之前所说的http状态吗为200~299
2 . ajax对象也有自己的状态码，用来表示本次ajax请求中各个阶段

xhttp.onload = () => {
console.log(xhttp.responseText);
}

//或者

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

5.ajax状态码
ajax状态码—xhttp.readyState
是用来表示一个ajax请求的全部过程中的某一个状态
readyState===0:表示初始化完成，也就是open方法还没执行 readyState===1：表示配置已经完成，也就是执行完open之后
readyState===2：表示send方法已经执行完毕 readyState===3：表示正在解析响应内容(只有一部分解析了) readyState===4:
表示响应内容已经解析完成，可以在客户端使用了
当readyState===4的时候，我们就可以正常使用服务端的数据了。再配合http状态码为200~299
​ ajax对象中有一个是xhr.status，这个是用来记录请求的http状态码的
当两个条件都满足的时候，我们的请求就完成了！
6.readystatechange
● 在ajax对象中有一个事件，叫readystatechange
● 这个事件是专门来**监听ajax对象的readystate**的值的
● 只要值发生变化，就会触发这个事件
● 所以我们可以采用这个事件来监听readystate中的值

const xhttp = new XMLHttpRequest()
xhttp.open('get', './data.php')
xhttp.send()
xhttp.onreadyStateChange = function () {
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4
// 并且 http 的状态码是不是 200 ~ 299
if (xhttp.readyState === 4 && /^2\d{2}$/.test(xhttp.status)) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了
}
或者
 if (xhttp.readyState === 4 && this**.**status** == 200) {
}

7.responseText------记录服务端给我们的响应体内容的
8.ajax请求方式
get —偏向于获取数据
post—偏向于**提交**数据
put —偏向于**更新**数据(整个覆盖)
patch —偏向于**部分修改**数据
delete —偏向于删除数据
以上五种，但工作中比较常用的是get和post
封装一个属于自己的ajax
 

function changeObj(obj) {
let arr = []
for (i in obj) {
 arr.push(obj[i])
}
return arr
}
//changeObj函数用于将对象的值存入数组并返回
function shuAjax(options) {
//shuAjax函数用于发送Ajax请求
// 定义默认的请求参数对象
let obj1 = {
url: '',
method: 'GET',
async: true,
data: {},
headers: {
"Content-Type": "application/form-www-urlencoded",
"Content-Type": "application/json"
},
success: function (res) {
console.log(res);
},
error: function (err) {
console.log(err);
}
}
// 解构赋值，合并默认参数和传入参数
 let { url, method, async, data, headers, success, error } = {
...obj1,
...options
}
// 根据请求方法执行相应操作
switch (method.toUpperCase()) {
case 'DELETE':
// 处理DELETE请求
break;
default:
// 处理其他请求
break;
}
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest()
xhr.open(method, url, async)
// 设置请求头
let newArr = changeObj(headers)
for (let i = 0; i < newArr.length; i++) {
xhr.setRequestHeader("Content-Type", newArr[i])
}
// 根据请求方法发送请求
if (method.toUpperCase() === 'GET' || method.toUpperCase() === 'DELETE') {
 xhr.send()
} else {
xhr.send(JSON.stringify(data))
}
// 监听请求完成事件
xhr.onload = () => {
console.log(xhr.responseText);
}
}

shuAjax使用方法：
格式：shuAjax({})
对象中的参数：
url 必须传的参数 --如果是要使用put PATCH delete需要在**路由最后面加上所要访问的id值**
method 可选 不选为get
data 可选 当用post PATCH put的时候传入一个对象形式的参数
使用案例：

<button id="btn1">get</button>
<script src="./shuAjax.js"></script>
<script>
 btn1.onclick = () => {
shuAjax({
url: 'http://localhost:3000/users/22',
method: 'PUT',
data: {
username: 'kang',
password: 1234556565
}
})
}

二.Axios
1. axios是干啥的
​ 说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新
一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十
分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生。
Ajax(Asynchronous JavaScript and XML)：异步网络请求。Ajax能够让页面无刷新的请求数据。
​ 实现ajax的方式有多种，如**jQuery封装的ajax**，原生的**XMLHttpRequest**，以及**axios**。但各种方式都有利弊：
● 原生的XMLHttpRequest的**配置和调用方式都很繁琐**，实现异步请求十分麻烦
● jQuery的ajax相对于原生的ajax是非常好用的，但是**没有必要因为要用ajax异步网络请求而引用jQuery框架**
Axios（ajax i/o system）：这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客
户端，只不过它是基于Promise的()，符合最新的ES规范。具备以下特点：
● 在浏览器中创建XMLHttpRequest请求
● 在node.js中发送http请求
● 支持Promise API
● 拦截请求和响应
● 转换请求和响应数据
● 取消要求
● 自动转换JSON数据
● 客户端支持防止CSRF/XSRF(跨域请求伪造
2.Axios请求方式
2.1 axios可以请求的方法：
​ get：获取数据，请求指定的信息，返回实体对象 ​ post：向指定资源提交数据（例如表单提交或文件上传） ​ put：更新数据，从
客户端向服务器传送的数据取代指定的文档的内容 ​ patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新 ​
delete：请求服务器删除指定的数据
2.2 get请求
示例代码：
方法1：

//请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{
 params:{
id:1
}
}).then(resp=>){
console.log(resp.data);
},err=>{
console.log(err);
})

方法2：

this.$axios({
method: 'get',
url: '/goods.json',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

2.3post请求
post请求一般分为两种类型
​ 1. form-data 表单提交，图片上传、文件上传时用该类型比较多
1 . application/json 一般是用于 ajax 异步请求
示例代码
方法1：

this.$axios.post('/url',{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

方法2：

$axios({
method: 'post',
url: '/url',
data: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
 console.log(err);
})

form-data请求

let data = {
//请求参数
}
let formdata = new FormData();
for(let key in data){
formdata.append(key,data[key]);
}
this.$axios.post('/goods.json',formdata).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})

2.4并发请求
并发请求：同时进行多个请求，并统一处理返回值 示例代码

this.$axios.all([
this.$axios.get('/goods.json'),
 this.$axios.get('/classify.json')
]).then(
this.$axios.spread((goodsRes,classifyRes)=>{
console.log(goodsRes.data);
console.log(classifyRes.data);
})
)

3.Axios实例
3.1创建axios实例
示例代码

let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/goods.json').then(res=>{
console.log(res.data);
})

可以同时创建多个axios实例。 axios实例常用配置：
​ baseURL 请求的域名，基本地址，类型：String ​ timeout 请求超时时长，单位ms，类型：Number ​ url 请求路径，类型：String ​
method 请求方法，类型：String ​ headers 设置请求头，类型：Object ​ params 请求参数，将参数拼接在URL上，类型：Object ​
data 请求参数，将参数放到请求体中，类型：Object
3.2axios全局配置

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';

3.3 axios实例配置

let instance = this.$axios.create();
instance.defaults.timeout = 3000;

3.4 axios请求配置

this.$axios.get('/goods.json',{
timeout: 3000
}).then()

以上配置的优先级为：**请求配置 > 实例配置 > 全局配置**
4.拦截器
拦截器：在请求或响应被处理前拦截它们
4.1 请求拦截器

this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config
},err=>{
// 请求错误处理
return Promise.reject(err);
})
//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
})

4.2 响应拦截器

this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
 },err=>{
// 响应错误处理
return Promise.reject(err);
})

4.3 取消拦截

let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);

5.错误处理

this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})

6.取消请求

let source = this.$axios.CancelToken.source();
this.$axios.get('/goods.json',{
cancelToken: source
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
})
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');