箭头函数
普通函数 简写 就是 箭头函数
//普通匿名函数
const aa = function(param1,param2){
console.log(param1)
console.log(param2)
}
//改成箭头函数
const bb = (param1,param2) => {
console.log(param1)
console.log(param2)
}
//如果只有一个参数
const cc = (param1) => {
console.log(param1)
}
//一个参数可以省去括号
const cc2 = param1 => {
console.log(param1)
}
//没有参数
const dd = () => {
console.log('====')
}
//方法体就一句话
const ee = () => console.log('====')
正文
当有多个接口需要顺序调用时
顺序调用是指 :接口1返回的数据 ,作为请求接口2的参数 ,接口2返回的数据 ,又作为请求接口3的参数
普通ajax的写法(回调地狱)
$.ajax({
url:'接口1',
success:(res1)=>{
console.log(res1)//得到结果1
$.ajax({
url:'接口2',
data:res1,//结果1 作为 参数
success:res2=>{
console.log(res2)//得到结果2
$.ajax({
url:'接口3',
data:res2,//结果2 作为 参数
success:res3=>{
console.log(res3)//得到结果3
//.....
}
})
}
})
}
})
promise写法
promise基本用法
实例化时 new Promise(回调函数),传入的参数是一个回调函数
这个回调函数有两个参数分别是resolve和reject
resolve 用来把 promise对象 变成 成功状态 ,并返回结果
reject 用来把 promise对象 变成 失败状态 ,并返回结果
//创建promise 实例
let promiseObj = new Promise((resolve,reject)=>{
let url = 'xxx.api'
let data = {'id':1}
$.ajax({
url:url,
data:data,
success:res=>{
if (res.code === 200){
resolve(res)
}else{
reject('接口返回错误:'+res.msg)
}
},
})
})
promise实例 请求接口后,要么变为 成功状态 ,要么变为 失败状态
- 可以通过 .then() 方法设置 成功后的回调 ,回调参数就是 promise内部 通过resolve()方法 返回的参数
- 可以通过 .catch() 方法设置 失败后的回调 ,回调参数就是 promise内部 通过reject()方法 返回的参数
promiseObj
.then(
res1 => {
console.log(res1)//res1 就是 promise内部 resolve()的参数
}
)
.catch(
e => {
console.log(e)//e 就是 promise内部 reject()的参数
}
)
通常的用法是封装一个方法request(url,params) 用来获取promise对象
传入接口地址和参数就能得到一个promise对象
//封装一个获取Promise对象的方法
const request = (url,params) => {
return new Promise(
(resolve,reject) => {
$.ajax({
url:url,
data:params,
success:res=>{
if (res.code === 200){
resolve(res)
}else{
reject('接口返回错误:'+res.msg)
}
}
})
}
)
}
promise 链式调用
需要在第一个.then()设置的回调内 return 一个新的promise对象
request('接口1',{})
.then(res1=>{
console.log(res1)//得到结果1
return request('接口2',res1) //结果1 作为 参数
})
.then(res2=>{
console.log(res2)//得到结果2
return request('接口3',res2)//结果2 作为 参数
})
.then(res3=>{
console.log(res3)//得到结果3
//......
})
sync await
promise.then() 链式调用的方式 相比于 普通ajax()回调地狱 ,有了很大的改进
但是一连串的的.then().then().then()看上去也不方便
改成 async和 await方式
await 必须出现在 async 声明的方法内部 ,不能单独出现
//test 方法 用async声明 ,调用test() 返回的就是一个promise对象
const test = async () => {
//request('接口1') 返回的是一个promise对象
//用await声明后 , await request('接口1') 返回值就是内部resolve()的参数
//不需要.then() 就能直接拿到接口返回的数据
//并且await 声明的请求会阻塞后边的执行
let res1 = await request('接口1')
console.log(res1)//得到结果1
//由于await 声明了 request('接口1') ,这里会被第一个请求阻塞
let res2 = await request('接口2',res1)//结果1 作为 参数
console.log(res2)//得到结果2
let res3 = await request('接口3',res2)//结果2 作为 参数
console.log(res3)//得到结果3
}
//调用test() ,由于async声明 ,这里test() 返回的也是promise对象
//所以可以用 .catch() 方法
test().catch(e => console.log("接口1,接口2,接口3中 ,任何一个reject() 都能被捕获") )
我是个干后端的 ,上边有不对的地方请标明
网友评论