一.AJAX
AJAX(async JavaScript and XML)，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。
二.原生AJAX
function getData(){
//1生成ajax的核心对象XMLHttpRequest
var obj=new XMLHttpRequest()
//2 由ajax引擎发送请求给服务器
//open(请求方法,url,同步或者异步)
//请求方法 get post 默认的为get
//同步 false 异步true
obj.open("get","test.php",true)
obj.send() null。。。设置请求头
//获取从服务器返回的数据
//属性 readyState 请求状态值  ０－１－２－３－４
//０ 请求还没有初始化  １请求已经建立连接 2请求已经接受，服务器在处理 3已经接受到部分数据 4已经接受到服务器返回的数据
//事件 onreadystatechange 当readyState的值发生改变就会触发
//属性 status http的请求状态码 200 成功 404 找不到文件 400错误 客户端的错误 500是服务器的错误
obj.onreadystatechange=function(){
if(obj.readyState==4&&obj.status==200){
// responseText 来存储从服务器返回的数据
}
}
}
- 请求状态 readyState表示请求的状态，其一共有5种状态。
0 UNSENT (未打开) open()方法还未被调用.
1 OPENED (未发送) open()方法已经被调用.
2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回.
3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据.
4 DONE (请求完成) 整个请求过程已经完毕.
三.Vue中使用axios
// 下载axios npm i axios --save
import axios from "axios";
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
四.在vue中封装项目ajax
axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。
1、在src目录中新建util文件夹，然后新建api.js(接口列表)和request.js(axios请求的封装)
2、创建axios的实例，并且设置baseurl和超时事件
3、创建http对象,遍历api的接口，讲所有接口的方法挂载到http对象上
4、给instance添加拦截器
请求拦截器
在请求之前触发的拦截器
//instance.interceptors.request.use（config=>{},err=>{}）
第一个回调 处理完自己的事情后必须返回config 比如loading提示 权限的验证
响应拦截器
在拿到数据之后并且赋值之前会触发，可以过滤数据，数据过滤完成后必须返回res
//instance.interceptors.response.use（res=>{},()=>{}）
5、抛出http对象
五.Axios 拦截 —— 请求拦截和响应拦截
请求拦截就是在你请求的时候会进行触发！只要是你发送一个 axios 请求就会触发！主要用它做我们的loading 加载和数据的权限验证,包括我们所有的数据预加载也可以实现，响应拦截主要是我们在 loading 加载，和做所有数据加载整体的结束后，就需要在数据发给前端的时候进行隐藏和结束，包括我们的请求头的设置，后端数据已经发送过来的时候，我们为了确保请求头的传递就必须看看header 里面是否有你需要的请求，如果有的话，再次进行设置！当然用 axios 拦截也可以配置公用地址，以及对于跨域问题解决，这个就是用 axios 拦截实现的功能。
//响应拦截
reqest.interceptors.response.use(response=>{
//返回成功的数据
return response;
},error=>{
//失败时返回报错
return Promise.reject(error)
})
request.get("data.json").then(reponse=>{
return response;
//响应成功之前做些什么
console.log(response)
},error = >{
console.log(error)
})
