async/await
1）async/await場景
這是一個用同步的思維來解決異步問題的方案魄缚，當前端接口調用需要等到接口返回值以后渲染頁面時。
2）名詞解釋
(1)async
async的用法喜滨，它作為一個關鍵字放到函數前面捉捅，用于表示函數是一個異步函數，因為async就是異步的意思鸿市， 異步函數也就意味著該函數的執(zhí)行不會阻塞后面代碼的執(zhí)行锯梁， async 函數返回的是一個promise 對象即碗。
(2)await
await的含義為等待。意思就是代碼需要等待await后面的函數運行完并且有了返回結果之后陌凳，才繼續(xù)執(zhí)行下面的代碼剥懒。這正是同步的效果
例子如下：await要放在async中，并且await后面的函數運行后必須返回一個Promise對象才能實現(xiàn)同步的效果合敦。
1.api/ajax.js
import axios from 'axios'
export default function ajax(url = '',params = {} ,type = 'GET'){
let promise;
return new Promise((resolve ,reject)=>{
// 判斷請求的方式
if(type == 'GET'){
let paramsStr = '';
Object.keys(params).forEach( key=>{
paramsStr += key+'='+params[key]+'&';
})
if(paramsStr != ''){
paramsStr = paramsStr.substr(0,paramsStr.lastIndexOf('&'));
}
url+='?'+paramsStr;
promise = axios.get(url);
}else{
promise = axios.post(url,params)
}
promise.then((res)=>{
resolve(res.data)
}).catch((err)=>{
reject(err);
})
})
}
2.api/index.js
import ajax from './ajax'
const BASE_URL = 'https://localhost:3000/';
//請求方法
export const getHomeCasual = ()=>ajax(BASE_URL+'Homeapp.do');
3.組件中調用請求方法
import { getHomeCasual } from './../api/index'
created(){
this.getHomeData();
},
methods:{
// 請求數據 async/await=>異步轉為同步
async getHomeData (){
const result = await getHomeCasual();
console.log(result);
}
}
axios 常規(guī)用法
new Vue({
el:"#app",
created(){
this.ajaxData();
},
mothods:{
ajaxData(){
const result = axios.get('/homeapp.do').then((res)=>{
console.log(res);
})
.catch((err)=>{
console.log(res);
})
}
}
})
axios 同步用法
new Vue({
el:"#app",
created(){
this.ajaxData();
},
mothods:{
async ajaxData(){
try{
const result = await axios.get('/homeapp.do');
console.log(result);
}catch(e){
alert('請求出錯了：'+e)
}
}
}
})
上面會有點操作繁瑣每次請求回來的數據都要try--catch判斷接口如果很多的話很繁瑣
下面我們對ajax.js進行優(yōu)化我們把返回的reject（error）隱藏初橘，直接彈出報錯即可這樣大大減少了開發(fā)效率，
還有就是如果接口中沒有用到headers就可以直接刪掉（僅供參考）
export default function ajax (url, data={}, type='GET',headers) {
//優(yōu)化處理請求異常這樣就不用在請求的地方用try catch判斷了充岛；這里新建一個promise在錯誤的時候不用返回reject（error）了
return new Promise(function (resolve, reject) {
// 執(zhí)行異步ajax請求
let promise
if (type === 'GET') {
// 準備url query參數數據
let dataStr = '' //數據拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&'
})
if (dataStr !== '') {
dataStr = dataStr.substring(0, dataStr.lastIndexOf('&'))
url = url + '?' + dataStr
} `+`
// 發(fā)送get請求
promise = axios.get(url,headers)
} else {
// 發(fā)送post請求
promise = axios.post(url, data,headers)
}
promise.then(function (response) {
// 成功了調用resolve()
resolve(response.data)
}).catch(function (error) {
//失敗了調用reject()
alert('請求出錯了：'+e)
//reject(error)
})
})
}
