一，基本使用
其實就是之前學過的異步函數，異步編程在函數前寫一個ansyc，就轉化為異步函數，返回的是一個promise對象，于是就可以使用await關鍵字，可以把異步函數寫成同步函數的形式，極大地提高代碼的可讀性。
原本的：
?? ??? ? ? axios.get('adata',{
?? ??? ??? ? ? params:{
?? ??? ??? ??? ? ? id:123,
?? ??? ??? ??? ? ? name:'zhangsan'
?? ??? ??? ? ? }
?? ??? ? ? }).then(function(ret){
?? ??? ??? ? ? console.log(ret)
?? ??? ? ? })
現在：
//利用ansyc和await編寫
?? ??? ??? ?async function queryData(){
?? ??? ??? ??? ?var ret=await axios.get('adata',{
?? ??? ??? ??? ??? ?params:{
?? ??? ??? ??? ??? ??? ?id:12,
?? ??? ??? ??? ??? ??? ?name:'lisi'
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ??? ?//直接利用axios.get('地址')，通過await取得服務器的響應，并賦值給ret
?? ??? ??? ??? ?console.log(ret)
?? ??? ??? ??? ?//因為響應攔截器已經處理成ret.data了，所以這里會直接得到服務器響應的信息
?? ??? ??? ?}
?? ??? ??? ?queryData()
整體代碼：
?<!DOCTYPE html>
<html lang="en">
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<script type="text/javascript" src="js/axios.js"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?axios.defaults.baseURL='http://localhost:3000/'
?? ??? ??? ?
?? ??? ??? ?//axios請求攔截器
?? ??? ??? ?axios.interceptors.request.use(function(config){
?? ??? ??? ??? ?config.headers.mytoken='nihao'
?? ??? ??? ??? ?return config
?? ??? ??? ?},function(err){
?? ??? ??? ??? ?console.log(err)
?? ??? ??? ?})
?? ??? ??? ?//axios響應攔截器
?? ??? ??? ?axios.interceptors.response.use(function(res){
?? ??? ??? ??? ?//console.log(res)//這里獲取到的res就是之前認知中的res,是把服務器傳回來的數據一起包裹在一個對象res里面的。
?? ??? ??? ??? ?//而真正的服務器傳過來的數據是res.data
?? ??? ??? ??? ?//所以說，響應攔截器的作用就是攔截服務器的響應的東西，攔截之后，再將數據處理后交給客戶端
?? ??? ??? ??? ?//比如說，我們想讓客戶端直接獲取服務器傳過來的信息時。
?? ??? ??? ??? ?var data=res.data
?? ??? ??? ??? ?return data
?? ??? ??? ?},function(err){
?? ??? ??? ??? ?console.log(err)
?? ??? ??? ?})
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?//利用ansyc和await編寫
?? ??? ??? ?async function queryData(){
?? ??? ??? ??? ?var ret=await axios.get('adata',{
?? ??? ??? ??? ??? ?params:{
?? ??? ??? ??? ??? ??? ?id:12,
?? ??? ??? ??? ??? ??? ?name:'lisi'
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ??? ?//直接利用axios.get('地址')，通過await取得服務器的響應，并賦值給ret
?? ??? ??? ??? ?console.log(ret)
?? ??? ??? ??? ?//因為響應攔截器已經處理成ret.data了，所以這里會直接得到服務器響應的信息
?? ??? ??? ?}
?? ??? ??? ?queryData()
?? ??? ??? ?
?? ??? ??? ?
?? ??? ??? ?
?? ??? ? ? // axios.get('adata',{
?? ??? ??? ? ?// ?params:{
?? ??? ??? ??? ? // ? id:123,
?? ??? ??? ??? ? // ? name:'zhangsan'
?? ??? ??? ? ?// ?}
?? ??? ? ? // }).then(function(ret){
?? ??? ??? ? ?// ?console.log(ret)
?? ??? ? ? // })
?? ??? ?</script>
?? ?</body>
</html>
-------------------------------------------------------------------------------
用try {} catch() {},配合async 和await ，await后面可以接對應的方法（該方法必須返回一個promise對象，方法必須包含async和await）
async doSave () {
? ? ? let param = this.$props.currentLog // 當前待辦數據
? ? ? let config = {
? ? ? ? 'pivCompetenceAppraiseInstanceId': this.currentMemberInfodata.pivCompetenceAppraiseInstanceId,
? ? ? ? 'pivCompetenceScoreConfirmDetailList': this.tableData3,
? ? ? ? 'pivSchemeCompetenceId': param ? param.pivSchemeCompetenceId : this.currentIndexRowData.pivSchemeCompetenceId,
? ? ? ? 'pivSchemeCompetenceTemplateId': param ? param.pivSchemeCompetenceTemplateId : this.currentIndexRowData.pivSchemeCompetenceTemplateId
? ? ? }
? ? ? try {
? ? ? ? let res = await Api.getEdit(config)
? ? ? ? this.$message.success(res.data)
? ? ? ? await this.editRow(this.currentRowdata) // 等刷新當前數據后再賦值,editRow 方法必須加上async 和await
? ? ? ? // 保留之前輸入的備注，不被清空
? ? ? ? this.pivAnonymousAccountRows.map(v1 => {
? ? ? ? ? this.tableDataRowData.map(v2 => {
? ? ? ? ? ? if (v1.id === v2.id) {
? ? ? ? ? ? ? v1.remark = v2.remark
? ? ? ? ? ? }
? ? ? ? ? })
? ? ? ? })
? ? ? } catch (err) {
? ? ? ? this.$message.error(err.message)
? ? ? }
? ? },
async editRow (row) {
? ? ? this.templateEvaluationMode = row.templateEvaluationMode
? ? ? this.currentRowdata = row
? ? ? // this.columnDesc = 0
? ? ? const me = this
? ? ? me.modelTitle = '績效考核打分-' + row.competenceName
? ? ? me.formData = row
? ? ? if (row.templateEvaluationMode === 3) {
? ? ? ? me.addModalQuality = false
? ? ? ? me.$nextTick(() => {
? ? ? ? ? me.addModalQuality = true // 素質評議模板彈框
? ? ? ? })
? ? ? } else if (row.templateEvaluationMode === 1 || row.templateEvaluationMode === 2) {
? ? ? ? me.addModal = true
? ? ? } else if (row.templateEvaluationMode === 4 || row.templateEvaluationMode === 5) {
? ? ? ? this.isShowTargetTask = true
? ? ? }
? ? ? if (row.stateName === '打分完成') {
? ? ? ? this.stateFlag = false
? ? ? ? this.commitFlag = true
? ? ? } else {
? ? ? ? this.stateFlag = true
? ? ? ? this.commitFlag = false
? ? ? }
? ? ? let config = {
? ? ? ? pivSchemeCompetenceId: row.pivSchemeCompetenceId,
? ? ? ? pivSchemeCompetenceTemplateId: row.pivSchemeCompetenceTemplateId
? ? ? }
? ? ? await Api.getDetail(config)
? ? ? ? .then((res) => {
? ? ? ? ? this.isPostShowed = res.data.isPostShowed
? ? ? ? ? if (row.templateEvaluationMode === 3) {
? ? ? ? ? ? this.headerQuality = []
? ? ? ? ? ? this.tableDataQuality = res.data.tableContents
? ? ? ? ? ? this.headerQuality = res.data.header
? ? ? ? ? ? // this.$nextTick(() => {
? ? ? ? ? ? // ? this.getQualityScore()
? ? ? ? ? ? // })
? ? ? ? ? } else if (row.templateEvaluationMode === 1 || row.templateEvaluationMode === 2) {
? ? ? ? ? ? this.pivAnonymousAccountRows = res.data.tableContents
? ? ? ? ? } else if (row.templateEvaluationMode === 4 || row.templateEvaluationMode === 5) {
? ? ? ? ? ? this.tableDataQuality = res.data.tableContents.appraiserContent
? ? ? ? ? ? this.targetState = this.tableDataQuality[0].state
? ? ? ? ? ? this.memberHeader = res.data.header.memberHeader
? ? ? ? ? ? this.memberContentData = res.data.tableContents.memberContent
? ? ? ? ? ? this.memberContent = this.memberContentData[0]
? ? ? ? ? ? if (row.templateEvaluationMode === 4) {
? ? ? ? ? ? ? this.appraiserHeader = res.data.header.appraiserHeader
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? this.getAllScoreOne()
? ? ? ? })
? ? ? ? .catch((err) => {
? ? ? ? ? if (err.message) {
? ? ? ? ? ? this.$message.error(err.message)
? ? ? ? ? }
? ? ? ? })
? ? },
?
_正則表達式)
