Vuex结合 async/await 优雅的管理接口请求

淡淡的烟草味﹌ 2021-12-23 06:43 428阅读 0赞

## 先看看 async/await 的语法 ##

**async 函数返回一个 Promise 对象**

`async`函数内部 return 返回的值。会成为 `then` 方法回调函数的参数。

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文件调用 ####

以上就是 vuex 结合 async/await 的简单应用事例了。欢迎指正不足不对之处。

转载于:https://www.cnblogs.com/ljx20180807/p/9838259.html