react 箭头表达式

小灰灰 2022-05-26 12:22 100阅读 0赞

### 基本用法 ###

ES6 允许使用“箭头”（`=>`）定义函数。

var f = v => v; // 等同于 var f = function (v) { return v; };

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用`return`语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错 let getTempItem = id => { id: id, name: "Temp" }; // 不报错 let getTempItem = id => ({ id: id, name: "Temp" });

以上的箭头表达式的基础知识

一下是在实际代码中的应用

grtTableData=()=>{
        
              let that =this;
              axios.get(url.typeMaintain.shoptypes,{
                params:{
                  pagenum:that.state.current,
                  pagesize:that.state.pageSize,
                  shoptypename:that.seachNameData,
                }
              }).then(function(json){   //json为成功的返回值 进行解析
                console.log(json.data.data)
                that.setState({
                  TableData:json.data.data.content,total:json.data.data.totalElements
                })
              }).catch(err => {
                 console.log(err);
              });
            }

ajax 回调函数的写法优化：

var ajax = ajaxGet('http://...');
    ajax.ifSuccess(success)
        .ifFail(fail);

这种链式写法的好处在于，先统一执行AJAX逻辑，不关心如何处理结果，然后，根据结果是成功还是失败，在将来的某个时候调用`success`函数或`fail`函数。

古人云：“君子一诺千金”，这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

Promise有各种开源实现，在ES6中被统一规范，由浏览器直接支持。先测试一下你的浏览器是否支持Promise：

// 直接运行测试:
    console.log('支持Promise!');

myPromise(true).then(function(message){
      console.log(message)
    })  //"输出默认参数success"

then:可以在promise中实现链式调用，在上文中已经介绍。补充，then里面的第二个函数，为异步调用失败之时执行,接上面的例子：
    
    myPromise(false).then(null,function(err){
      console.log(err)
    })
    //这样会输出"默认参数filed"
    
    catch：catch方法，相当于then(null，function（err）{console.log(err)}失败方法调用的一个缩写。
    
    myPromise(false).catch(function(err){console.log(err)})
    //这句话与上面等价，也会输出"默认参数filed"

总结：then为成功后执行的函数，catch为失败后执行的函数，其实是优化后的的回调函数。