[toc]
# AJAX
## 什么是AJAX？
AJAX 是 `异步的 JavaScript 和 XML` 的英文首字母编写。
是一种在浏览器中通过 JS 代码和后端服务器进行数据通信的技术。
## 浏览器如何发送 AJAX 请求（原生AJAX如何实现）？
浏览器中提供了一个 `XMLHttpRequest` 的对象，通过这个对象可以实现和服务器通信的功能。
示例代码：
~~~
// 1. 创建 XMLHttpRequest 对象
var xhr=new XMLHttpRequest();
// 2. 设置请求方式和地址
xhr.open('GET',url,false);
// 3. 设置处理返回数据的回调函数
xhr.onreadystatechange=function(){
// 3.1 根据状态判断是否成功
if(xhr.readyState==4){
// 3.2 根据状态判断执行结果
if(xhr.status==200 || xhr.status==304){
// 3.3 输出返回的结果
console.log(xml.responseText)
}
}
}
// 4. 向后端发送请求
xml.send()
~~~
## 如何将原生 AJAX 封装成 Promise 对象？
1. 创建 Promise 对象
2. 把AJAX代码放到 Promise 对象中
3. 通过调用 resolve 返回成功之后的结果
示例代码、
~~~
// 创建 Promise 对象
const promise = new Promise(function(resolve, reject){
// 创建处理返回结果的回调函数
const handler = function() {
if (this.readyState !== 4) {
return;
}
if (this.status === 200) {
// 如果成功就调用 resolve 设置为 fulfilled 状态，并返回结果
resolve(this.response);
} else {
// 如果失败就调用 reject 设置为 rejected 状态，并返回错误信息
reject(new Error(this.statusText));
}
};
// 以下为异步的原生 AJAX 代码
const client = new XMLHttpRequest();
client.open("GET", url);
// 设置上面创建的回调函数
client.onreadystatechange = handler;
client.responseType = "json";
client.setRequestHeader("Accept", "application/json");
client.send();
});
~~~
## 为什么要使用 axios？
axios 是一个高效、精简的已经封装好的 AJAX 的库，它内部使用了 ES6 中的 Promise 对 AJAX 进行封装，让我们可以直接使用 Promise 而无须自己再封装。
配合 async/await 一起使用，可以以同步的方式调用后端接口。
## axios 如何配置基地址？为什么要配置？
因为我们调用的后端接口前面基础部分都是相同的，配置了基地址之后，我们每次调用接口时就无须再写前面公共的部分了。
两种方式：
- 方式一、直接配置
~~~
// 配置基地址
axios.default.baseURL = 'http://xxx.xxx.xxx/api/v1/'
// 调用接口时无须再写基地址
axios.get('/users') // 相当于：http://xxx.xxx.xxx/api/v1/users
~~~
- 方式二、创建 axios 对象时配置
~~~
// 创建对象时配置基地址
const http = axios.create({
baseURL: 'http://xxx.xxx.xxx/api/v1/',
});
// 通过对象调用接口无须写基地址
http.get('/users') // 相当于：http://xxx.xxx.xxx/api/v1/users
~~~
## axios 拦截器有哪些？干什么用的？应用场景？
拦截器分为 `请求` 和 `响应` 两种拦截器。
- 请求拦截器：在发送`请求之前`调用。
- 响应拦截器：在服务 `返回数据之后，交给程序之前` 调用。
应用场景：
请求拦截器（发送之前）：
1. 页面中显示一个 loading 的进度条
2. 向发送的请求头中添加 Token ，实现令牌的身价验证
响应拦截器（服务器返回后）：
1. 销毁页面中显示的 loading 进度条
2. 根据返回的结果做统一的处理，比如，如果请求失败，统一提示错误的消息
## 调用接口时有几种请求方式？一般什么时候使用？
向接口发送请求时，主要有以下五种方式：
1、GET ：当获取数据时使用
2、POST：在添加数据时使用
3、DELETE：删除数据时使用
4. PUT：修改整条数据时使用
5. PATCH：修改数据的一部分时使用
示例代码、
~~~
axios.get('/users?limit=10') // 获取10条记录
axios.delete('/users/10') // 删除id=10的用户
axios.post('/users',{name:'tom'}) // 添加一个新用户
axios.put('/users/10',{name:'jack'}) // 修改 id=10 的用户的 name=jack
~~~
