zoukankan      html  css  js  c++  java
  • es6 async与await实战

    在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面的业务,如果我们想把增删改查的业务封装起来,基本没可能,或者封装的很不优雅

    下面来说一说通过async和await方式来辅助请求和封装

    首先我们定义一个类,定义一个async方法,才可以使用await

    class JForm extends React.Component {
    
       handleSubmit = () => {
          
          ...
          this.handleInsert(obj)
          ...  
          
        }
    
       async handleInsert(obj) {
          let url = '...'
          let res = await insert(url, obj)
          if(res){
            this.hideModal();
            this.props.refresh();
          }
        };
    
    }
    

      

    上面是一个react的一段代码,当触发handleSubmit 表单提交方法,会调用handleInsert方法,此时会等await insert 执行完返回结果再执行if(res)的判断

    我们再来看看重要的insert方法应该怎么写呢

    export function insert(url, obj) {
      return new Promise(function (resolve, reject) {
        const hide = message.loading('正在新增...', 0);
        let res = apiPost(url, obj).then(function (res) {
          const {data, ret, msg} = res;
          hide();
          if(ret==200) {
            Success(`添加1条数据`);
          } else {
            Error(res.msg);
          }
          resolve(ret==200?true:false)
        })
      })
    }
    

    看起来貌似有点复杂?其实核心的代码只有下面的部分

    export function insert(url, obj) {
      return new Promise(function (resolve, reject) {
          resolve(ret==200?true:false)
      })
    }
    

      

    对的,只有 return new Promise 和 resolve() ,resolve里面的data就是let res要接收的值了,我们可以在请求后将结果传入resolve即可。

    如果场景不是react和class用不了async 和await 怎么办呢?其实我的insert方法下还有调用一个方法apiPost体也有resolve,

    export const apiPost = (url, configObj) => {
        if (typeof (configObj) === 'undefined') {
            configObj = []
        }
        return new Promise(function (resolve, reject) {
            const reqUrl = base.host + '/' + url + '?token=' + localStorage.getItem('token');
            axios.post(reqUrl, qs.stringify({...configObj})).then(
                response => {
                    let resulData = response.data
                    resolve(resulData)
                }
            );
        })
    }
    

      

    在insert可以使用.then(function (res) { 来接收resolve过来的值,不过一对比就会发现多了很多(),{}了,不过是底层一点方法,只写一两次,所有就无所谓啦,最重要还是保持视图应用层的简洁

    不吹水了,新年快乐

  • 相关阅读:
    js画线
    开源Math.NET基础数学类库使用(11)C#计算相关系数
    Cent OS5.2安装Hyper-V集成光盘
    解决oracle11g的ORA-12505问题
    Oracle11g安装出现em.ear
    Entity Framework Code First (八)迁移 Migrations
    Modernizr.js入门指南(HTML5&CSS3浏览器兼容插件)
    Waves:类Material Design 的圆形波浪(涟漪)点击特效插件
    多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects
    iOS 复选框风格转换 Switchery 开关效果
  • 原文地址:https://www.cnblogs.com/cxscode/p/8444233.html
Copyright © 2011-2022 走看看