react 箭头表达式

基本用法

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为失败后执行的函数，其实是优化后的的回调函数。