axios promise es6 arrow func vs func declaration

Question

Witam, mam problem ze zrozumieniem pewnej rzeczy. Mam następujący kod, i oczekuje, że funkcja load() wykona się gdy otrzymam odpowiedź z serwera, tymczasem funkcja wykonuje się wcześniej:

axios.post('https://example/save', data)
            .then( function(response) {
                console.log('saved successfully');
                this.props.load();
            })
            .catch( error => {
                if (error.response) {
                    console.log(error.response);
                }
            });

Natomiast gdy mam podobny kod ale gdy do then() przekazuje callback zapisany w postaci arrow function, wszystko działa tak jak tego oczekuje:

axios.post('https://example/save', data)
            .then( response => {
                console.log('saved successfully');
                this.props.load();
            })
            .catch( error => {
                if (error.response) {
                    console.log(error.response);
                }
            });

Answer 1

Wszystko rozbija się o this. Wewnątrz tradycyjnej funkcji this jest najprawdopodobniej ustawione na window. W arrow function jest na sztywno ustawione na miejsce, w którym taka funkcja została zadeklarowana.