-
1、promise
Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获得异步操作的消息。
使用Promise主要有以下好处：
①可以避免多层异步调用嵌套问题（回调地狱）
②promise对象提供了简洁的api，使得控制异步操作更加容易
（1）Promise基本用法
①实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
②resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果
var p=new Promise(function(resolve,reject){
//实现处理逻辑，根据处理结果分别调用不同的方法
//成功时调用 resolve（）
//失败时调用 reject()
});
p.then(function(ret){
//从resolve得到正常结果
}，function（ret){
//从reject得到错误消息
})
（2）then参数中的函数返回值
①返回Promise实例对象
返回的该实例对象会调用下一个then。
②返回普通值
返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值。
（3）Promise常用的api
①实例方法：
then()得到异步任务的正确结果；catch()获取异常信息；finally()成功与否都会执行（尚不是正式标准）；
②对象方法：
Promise.all()并发处理多个异步任务，所有任务都执行完成才能得到结果；Promise.race()并发处理多个异步任务，只要有一个任务完成就能得到结果；
-
2、接口调用-fetch用法
①更加简单点的数据获取方式，功能更加强大、更灵活，可以看做是xhr的升级版；
②基于Promise实现
（1）语法结构
fetch(url).then(f1)
.then(f2)
...
catch(fn)
eg.
fetch('url').then(data=>{
//text()属于fetch api的一部分，它返回的是promise对象，用于获取后台返回的数据
return data.text();
}).then(ret=>{
注意这里获得的才是最终的数据
console.log(ret);
})
（2）fetch请求参数
①常用的配置选择：
method(String):HTTP请求方法，默认为GET（GET、POST、PUT、DELETE）；body(String):HTTP请求参数；headers(Oject):HTTP的请求头，默认为{}
②GET请求方式的参数传递：
传统：
fetch('/abc?id=123',{
method:'get'
}).then(data=>{
return data.text()
}).then(ret=>{
console.log(ret)
})
restful形式：
fetch('/abc/123',{
method:'get'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
})
②DELETE请求方式的参数传递：
fetch('/abc/123',{
method:'delete'
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
})
③ POST请求方式的参数传递：
一般方式：
fetch('/abc',{
method:'post',
body:'uname=list&pwd=123',
headers:{
'Content-Type':'application/x-www-form-urlencoded',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
})
json方式：
fetch('/abc',{
method:'post',
body:JSON.stringify({
uname:'lisi',
age:12
}),
headers:{
'Content-Type':'application/json',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
})
③ PUT请求方式的参数传递：
也支持一般方式：
fetch('/abc/123',{
method:'put',
body:JSON.stringify({
uname:'lisi',
age:12
}),
headers:{
'Content-Type':'application/json',
}
}).then(data=>{
return data.text();
}).then(ret=>{
console.log(ret)
})
（2）fetch响应结果
响应数据格式：
①text()：将返回体处理成字符串类型；
②json()：返回结果和JSON.parse(responseText)一样
如：
fetch('/abc/123',{
method:'get'
}).then(data=>{
return data.json();
}).then(ret=>{
console.log(ret)
})
-
3、接口调用-axios用法
axios是一个基于Promise用于浏览器和node.js的HTTP客户端。
它具有以下特征:
支持浏览器和node.js；支持promise；能拦截请求和响应；自动转换JSON数据；
（1）基本用法
axios.get('/adata)
.then(ret=>{
//data属性是固定的，用于获取后台响应的数据
console.log(ret.data)
})
（2）常用API
①get:查询数据；
通过url传递参数：
一般方式：
axios.get('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
restful方式：
axios.get('/adata/123')
.then(ret=>{
console.log(ret.data)
})
通过params选项传递参数：
axios.get('/adata',{
params:{
id:123
}
})
.then(ret=>{
console.log(ret.data)
})
②post:添加数据；
通过选项传递参数（默认传递的是json格式的数据）
axios.post('/adata',{
uname:'tom',
pwd:123
})
.then(ret=>{
console.log(ret.data)
})
通过URLSearchparams传递参数（application/x-www-form-urlencoded）
const params=new URLSearchParams();
params.append('params1','value1');
params.append('params2','value2');
axios.post('/api/test',params).then(ret={
console.log(ret.data)
})
③put:修改数据；
和post请求类似。
④delete:删除数据；
和get请求类似。
（3）axios的响应结果
响应结果的主要属性：data:实际响应回来的数据；headers:响应头信息；status:响应状态码；statusText:响应状态信息
（4）axios的全局配置
axios.defaults.timeout=3000;//超时时间 axios.defaults.baseURL='http://127.0.0.1:3000/api/';//默认地址 axios.defaults.headers['mytoken']='qwer1234!@#$'//设置请求头
（5）axios拦截器
①请求拦截器：在请求发出前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
return config;
},function(err){
//处理响应的错误信息
});
②响应拦截器：在获取数据之前对数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(config){
//在这里对返回的数据进行处理
return config;
},function(err){
//处理响应的错误信息
});
-
4、接口调用-async/await用法
async/awati是ES7引入的心语法，可以更加方便的进行异步操作；async关键字用于函数上（async函数的返回值是Promise实例对象）；await关键字用于async函数当中（await可以得到异步的结果）
eg.（可以不使用then）
async function queryData(id){
const ret=await axios.get('/data');
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
（1）async/await处理多个异步请求
async function queryData(id){
const info=await axios.get('/async1');
const ret=await axios.get('/async2?info='info.data);
return ret;
}
queryData.then(ret=>{
console.log(ret)
})
