箭頭函數(shù)
普通函數(shù) 簡寫 就是 箭頭函數(shù)
//普通匿名函數(shù)
const aa = function(param1,param2){
console.log(param1)
console.log(param2)
}
//改成箭頭函數(shù)
const bb = (param1,param2) => {
console.log(param1)
console.log(param2)
}
//如果只有一個參數(shù)
const cc = (param1) => {
console.log(param1)
}
//一個參數(shù)可以省去括號
const cc2 = param1 => {
console.log(param1)
}
//沒有參數(shù)
const dd = () => {
console.log('====')
}
//方法體就一句話
const ee = () => console.log('====')
正文
當(dāng)有多個接口需要順序調(diào)用時
順序調(diào)用是指 :接口1返回的數(shù)據(jù) ,作為請求接口2的參數(shù) ,接口2返回的數(shù)據(jù) ,又作為請求接口3的參數(shù)
普通ajax的寫法(回調(diào)地獄)
$.ajax({
url:'接口1',
success:(res1)=>{
console.log(res1)//得到結(jié)果1
$.ajax({
url:'接口2',
data:res1,//結(jié)果1 作為 參數(shù)
success:res2=>{
console.log(res2)//得到結(jié)果2
$.ajax({
url:'接口3',
data:res2,//結(jié)果2 作為 參數(shù)
success:res3=>{
console.log(res3)//得到結(jié)果3
//.....
}
})
}
})
}
})
promise寫法
promise基本用法
實例化時 new Promise(回調(diào)函數(shù)),傳入的參數(shù)是一個回調(diào)函數(shù)
這個回調(diào)函數(shù)有兩個參數(shù)分別是resolve和reject
resolve 用來把 promise對象 變成 成功狀態(tài) ,并返回結(jié)果
reject 用來把 promise對象 變成 失敗狀態(tài) ,并返回結(jié)果
//創(chuàng)建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實例 請求接口后,要么變?yōu)?成功狀態(tài) ,要么變?yōu)?失敗狀態(tài)
- 可以通過 .then() 方法設(shè)置 成功后的回調(diào) ,回調(diào)參數(shù)就是 promise內(nèi)部 通過resolve()方法 返回的參數(shù)
- 可以通過 .catch() 方法設(shè)置 失敗后的回調(diào) ,回調(diào)參數(shù)就是 promise內(nèi)部 通過reject()方法 返回的參數(shù)
promiseObj
.then(
res1 => {
console.log(res1)//res1 就是 promise內(nèi)部 resolve()的參數(shù)
}
)
.catch(
e => {
console.log(e)//e 就是 promise內(nèi)部 reject()的參數(shù)
}
)
通常的用法是封裝一個方法request(url,params) 用來獲取promise對象
傳入接口地址和參數(shù)就能得到一個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 鏈?zhǔn)秸{(diào)用
需要在第一個.then()設(shè)置的回調(diào)內(nèi) return 一個新的promise對象
request('接口1',{})
.then(res1=>{
console.log(res1)//得到結(jié)果1
return request('接口2',res1) //結(jié)果1 作為 參數(shù)
})
.then(res2=>{
console.log(res2)//得到結(jié)果2
return request('接口3',res2)//結(jié)果2 作為 參數(shù)
})
.then(res3=>{
console.log(res3)//得到結(jié)果3
//......
})
sync await
promise.then() 鏈?zhǔn)秸{(diào)用的方式 相比于 普通ajax()回調(diào)地獄 ,有了很大的改進(jìn)
但是一連串的的.then().then().then()看上去也不方便
改成 async和 await方式
await 必須出現(xiàn)在 async 聲明的方法內(nèi)部 ,不能單獨(dú)出現(xiàn)
//test 方法 用async聲明 ,調(diào)用test() 返回的就是一個promise對象
const test = async () => {
//request('接口1') 返回的是一個promise對象
//用await聲明后 , await request('接口1') 返回值就是內(nèi)部resolve()的參數(shù)
//不需要.then() 就能直接拿到接口返回的數(shù)據(jù)
//并且await 聲明的請求會阻塞后邊的執(zhí)行
let res1 = await request('接口1')
console.log(res1)//得到結(jié)果1
//由于await 聲明了 request('接口1') ,這里會被第一個請求阻塞
let res2 = await request('接口2',res1)//結(jié)果1 作為 參數(shù)
console.log(res2)//得到結(jié)果2
let res3 = await request('接口3',res2)//結(jié)果2 作為 參數(shù)
console.log(res3)//得到結(jié)果3
}
//調(diào)用test() ,由于async聲明 ,這里test() 返回的也是promise對象
//所以可以用 .catch() 方法
test().catch(e => console.log("接口1,接口2,接口3中 ,任何一個reject() 都能被捕獲") )
我是個干后端的 ,上邊有不對的地方請標(biāo)明
