复盘项目时,注意到dell老师使用的是axios实例,封装简单可用的get方法,并没有直接使用axios.get。
*为什么要创建axios实例,与直接的axios.get有什么区别呢?
因为在实际工作中,可能需要访问多个服务地址,而这些服务请求和响应的结构也可能都完全不同,那么你可以通过axios.create创建不同的实例来处理。
而且这样写代码又精简了啊喂(>○<)
另外搜索中又发现了ajax axios的对比,再学习一哈ajax:
Query ajax 是对原生XHR的封装。重点就是首先实例一个XMLHttpRequest对象,用其中的open方法建立连接;send方法传输数据(前端传到后台);然后再利用onreadystatechange 监听readyState的变化,当其为4时,代表请求完成
遇到的面试题也有手写ajax(๑°ㅁ°๑)ᵎᵎᵎ:
funcion ajax(url,fn){
// 刚好插一个手写XHR
// XMLHttpRequest对象用于在后台与服务器交换数据
const xhr = new XMLHttpRequest()
//get请求url,true代表异步
xhr.open("GET","/api",true)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
//responseText存放响应的文本
fn(xhr.responseText)
}
}
xhr.send() //发送请求
}
(不会的东西真是层层递进〒▽〒
xhr.readyState:
0 未初始化,还没有调用send()方法;
1 载入,已经调用send()正在发送请求;
2 载入完成, send()方法执行完成,已接收到全部响应内容;
3 交互, 正在解析响应内容
4 完成,响应内容解析完成,可在客户端调用
xhr.status :
2xx 表示成功处理请求,如200
3xx 需重定向,浏览器直接跳转,如301 302 304
重定向
4xx 客户端请求错误 如404 403
5xx 服务端错误
ajax是针对MVC,axios针对MVVM :
另一篇博客:MVVM MVC MVP
···············································································
axios其实就是在ajax的基础上加了promise
const myAxios = {
get: function(url) {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
resolve(xhr.responseText)
}
};
xhr.send();
})
}
ajax缺点:
axios优点: