Vuex結合 async/await 優雅的管理接口請求

先看看 async/await 的語法

async 函數返回一個 Promise 對象

async 函數內部 return 返回的值。會成爲 then 方法回調函數的參數。

1 2 3 4

async function  f() {      return 'hello world' }; f().then( (v) => console.log(v)) // hello world

若是 async 函數內部拋出異常，則會致使返回的 Promise 對象狀態變爲 reject 狀態。拋出的錯誤而會被 catch 方法回調函數接收到。

async function e(){ throw new Error('error'); } e().then(v => console.log(v)) .catch( e => console.log(e));

async 函數返回的 Promise 對象，必須等到內部全部的 await 命令的 Promise 對象執行完，纔會發生狀態改變

也就是說，只有當 async 函數內部的異步操做都執行完，纔會執行 then 方法的回調。

 

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout)); async function f(){ await delay(1000); await delay(2000); await delay(3000); return 'done'; } f().then(v => console.log(v)); // 等待6s後才輸出 'done'

 

正常狀況下，await 命令後面跟着的是 Promise ，若是不是的話，也會被轉換成一個 當即 resolve 的 Promise
以下面這個例子：

async function f() { return await 1 }; f().then( (v) => console.log(v)) // 1

若是返回的是 reject 的狀態，則會被 catch 方法捕獲。

Async 函數的錯誤處理

async 函數的語法不難，難在錯誤處理上。
先來看下面的例子：

 

let a; async function f() { await Promise.reject('error'); a = await 1; // 這段 await 並無執行 } f().then(v => console.log(a));

 

如上面所示，當 async 函數中只要一個 await 出現 reject 狀態，則後面的 await 都不會被執行。
解決辦法：能夠添加 try/catch。

 

// 正確的寫法 let a; async function correct() { try { await Promise.reject('error') } catch (error) { console.log(error); } a = await 1; return a; } correct().then(v => console.log(a)); // 1

 

若是有多個 await 則能夠將其都放在 try/catch 中。

如何在項目中使用呢  讓咱們結合Vuex來試試：

如何引入Vuex  以及編寫 

stroe.js

 

// stroe.js
import Vue from 'vue' import Vuex from 'vuex' import actions from './actions' Vue.use(Vuex) export const name = 'contract' const state = { // 數據字典  initData: [], number: '' } const mutations = { // 獲取數據字典 SET_INIT_DATA (_state, obj) { _state.initData = obj }, // 獲取分單申請ID集合  SET_NUMBER(_state, data) { _state.number = data console.log(_state) } } // 向外暴露store 對象 const store = new Vuex.Store({ namespaced: true, name, state, actions, mutations, }) // 模塊動態註冊 項目龐大接口數量很大是便於管理 有疑惑 直戳 https://vuex.vuejs.org/zh/guide/modules.html 去vuex官網看看解釋的更詳細 store.registerModule(name, { namespaced: true, name, state, actions, mutations, }) export default store

 

actions.js 文件

 

// actions.js
import axios from 'axios'; const ajax = { // 獲取數據字典 GET_INIT_DATA: `agreement/init?`, // 獲取編號 GET_CONTRACT_NUMBER: `agreement/archive?`, // 保存基本信息 SUBMIT_INFO: `agreement/submit/basic?` } // 提取公共部分 const API_URL = 'product/v1/middle/'; // 增長前綴 let INTERFACE = {}; for (let key in ajax) { INTERFACE[key] = API_URL + ajax[key]; }
 

// 獲取編號
function getContractNumber({commit}) {
 return new Promise((resolve, reject) => {
 axios.get(INTERFACE.GET_CONTRACT_NUMBER).then(data => {
 commit('SET_NUMBER', {data}) // 改變state.number
 resolve(data.data)
 }).catch((err) => {
 window.Alert(err)
 })
 })
}

// 獲取數據字典
async function getInitData({commit, state}, params) {
　const num = await getContractNumber() return new Promise((resolve, reject) => { axios.get(INTERFACE.GET_INIT_DATA).then((data) => {
　　　 commit('SET_INIT_DATA', {data}) // 改變state.initData resolve(data.data) }).catch((err) => { window.Alert(err) // 全局錯誤提示 }) }) } 
// 獲取詳情 function getInfo(id) { return new Promise((resolve, reject) => {
 // 寫法2 模板字符串語法 axios.get(`apply/v1/${id}/input?`).then(data => { resolve(data.data) }).catch((err) => { window.Alert(err) // 全局錯誤提示 }) }) } 
// 提交 async function onSubmit({commit}, params) { const result = await getInfo() console.log(result) return new Promise((resolve, reject) => { axios.post(`${INTERFACE.SUBMIT_INFO}/${result.num}/products`, {...params}).then(data => { resolve(data) }).catch((err) => { window.Alert(err) // 全局錯誤提示 }) }) } export default { saveContrantInfo, getContractNumber, getInitData, getInfo, onSubmit }

 

 index.vue文件調用

 

<script> import { name as moduleName } from '@/store' export default { data() { return {
　　　　// 基本信息 contractInfo: {}，
　　　　// 數據字典
　　　　baseData: [] } }, created() { // 獲取基本信息 若要then有返回值 actions 必須 resolve() 否則 then 方法沒用 this.$store.dispatch(`${moduleName}/getInfo`).then(data => { console.log(data) }) // 獲取數據字典 this.$store.dispatch(`${moduleName}/getInitData`).then(data => { Object.assign(this.baseData, data) }) }, methods: { // 獲取編號 async getNumber() {
　　　　　// 在 actions 函數裏 await 也行 看具體需求 此例只做爲演示 await 調用 const obj = await this.$store.dispatch(`${moduleName}/getContractNumber`) this.contractInfo.fileNo = obj.fileNo },// 提交  submit() { this.$store.dispatch(`${moduleName}/onSubmit`, this.contractInfo).then(data => { console.log(data) }) } } } </script>

以上就是 vuex 結合 async/await 的簡單應用事例了。歡迎指正不足不對之處。