原生 ajax请求 ：
-
优点：局部刷新，提高用户体验
-
缺点：跨域问题限制
//01、创建XMLHttpResquest对象，（异步调用对象）
varxhr=null;
if(window.XMLHttpRequest) {
xhr=newXMLHttpRequest();//ie7+等现代浏览器
}elseif(window.ActiveXObject) {//ie6，老版Opera
xhr=newActiveXObject('Microsft.XMLHTTP')
}
//02、创建一个新的HTTP请求，并指定其请求方法、URL以及验证信息
xhr.open('get','百度一下，你就知道',true)//true表示异步，可以省略
//03、设置响应HTTP请求状态变化函数
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')//post 必须设置
xhr.onreadystatechange=function() {//若为同步，此代码不用写，直接在send后，用xhr.responseText即可
if(xhr.readyState==4&&xhr.status==200) {
/* readyState
0：请求未初始化 1：服务器已建立连接 2：请求已接收 3：请求处理中 4：请求已完成，且响应就绪
status 200：OK 404：Not Found */
//获取异步返回的数据
xhr.responseText
xhr.responseXML.children[0].children
JSON.parse(xhr.responseText)
}
}
//04、发送HTTP请求
xhr.send(String)//用于post传值，形式：‘a=1&b=2’，而get传参就在url后面用“?”拼接
axios ：
-
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
-
支持 Promise API
-
可拦截请求和响应
基本使用 ：
//GET请求
axios.get('/user?ID=123')
.then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
})
//POS请求
axios({
method:'post',
url:'/abc/login',
data:{
userName:'Lan',
password:'123'
}
}).then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
})
// axios 发送并发请求 ：使用axios.all 可以放入多个请求数组
axios.all([axios({
url:'https://autumnfish.cn/api/joke'
}),axios({
url:'https://autumnfish.cn/api/joke',
params:{
name:'jack',
age:22
}
})]).then(res=>{
console.log(res)
console.log(res[0])
console.log(res[1])
})
创建axios实例 、axios拦截器
constrequest=axios.create({// 创建axios实例
// /db.json > 通过 axios > /dev-api/db.json > 通过 代理转发（vue.config.js）》 http://localhost:8001/db.json
// baseURL: '/dev-api',
baseURL:process.env.VUE_APP_BASE_API,
// baseURL: '/',
timeout:5000// 请求超时，5000毫秒
})
// 请求拦截器
request.interceptors.request.use(config=>{
returnconfig// 请求拦截
}, error=>{
returnPromise.reject(error);// 出现异常,抛出错误对象
})
// 响应拦截器
request.interceptors.response.use(response=>{
returnresponse// response.data
}, error=>{
returnPromise.reject(error);
})
// http://localhost:8888/dev-api/db.json 404
request.get('/db.json').then(response=>{
console.log(response.data)
})
fetch ：
-
第一个参数是URL(调整配置对象)，第二个是可选参数，可以控制不同配置的 init 对象
-
使用了 Promises 来处理结果/回调
-
当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
// get请求带参数
fetch('http://localhost:3000/ajaxdemo-method?id=123', {
method:'get'
}).then((response)=>{
console.log(response);
// return response.text();// 返回 进行判断
returnresponse.json()// 直接返回json格式
}).then((data)=>{
console.log(data);
// console.log(JSON.parse(data));
})
// post请求带参数
fetch('http://localhost:3000/ajaxdemo-post', {
method:'post',
body:"username=jack&age=18"
}).then((response)=>{
console.log(response);
returnresponse.text();// 返回 进行判断
}).then((data)=>{
console.log(data);
})
处理错误信息 ：
// 处理错误信息
fetch('http://localhost:3000/putData?id=123', {
method:'delete',
body:JSON.stringify({username:'rose',age:18}),
headers:{
'Content-type':'application/json'
}
}).then((response)=>{
if(response.ok) {// 当ok时 正常走 下面的then
returnresponse.text();
}else{
returnPromise.reject({// 不ok 返回错误信息 走catch
status:response.status,
statusText:response.statusText
})
}
}).then((data)=>{
console.log(data);
}).catch((err)=>{
console.log('错误信息'+err.status+":"+err.statusText);
})
为什么使用两次then才能取出数据？
fetch(url).then(res=>{
// res.text 返回的是一个纯文本 是一个promise对象
// res.json 返回的是一个对象（json/array） 是一个promise对象
letresdata=res.json();
console.log(0, resdata);
//打印：[[PromiseStatus]]: "resolved"
//return res.text();
returnresdata;//返回值是一个新的promise对象，状态为resolved,所以执行then
}).then(data=>{
//上一个then返回值是Promise对象（即有异步操作），等待该Promise对象的状态发生变化,then才会被调用
console.log(data)
}).catch(err=>{
console.log(4, err);
});
async ：
-
async异步函数的标识（普通函数定义前加async关键字 普通函数变成异步函数）
-
返回值promise对象（异步函数默认返回promise对象）
-
在异步函数内部使用return关键字进行结果返回 结果会被包裹的promise对象中 return关键字代替了resolve方法
-
调用异步函数再链式调用then方法获取异步函数执行结果
-
调用异步函数再链式调用catch方法获取异步函数执行的错误信息
-
使用then方法添加回调函数。当函数执行时，果遇到了await就会先返回，等到异步操作完成，再接着执行函数体后面的语句。
await ：
-
await关键字只能出现在异步函数中
-
await后面也要是promise对象
-
await关键字可是暂停异步函数向下执行 直到promise返回结果