Interview front-end (c)

1. talk ajax, axios, fetch difference

jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

Advantages and disadvantages:

Itself is programmed for the MVC, MVVM does not meet the current wave of front-end
based on the native XHR development, XHR architecture itself is not clear, have an alternative to fetch
JQuery entire project is too large, simply have to use the introduction of the entire JQuery ajax very unreasonable (take personalized packaging solutions can not enjoy the CDN service)

axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Advantages and disadvantages:

Create XMLHttpRequest from the browser
issue http request from node.js
support Promise API
to intercept requests and responses
conversion request and response data
cancellation request
automatically convert JSON data
client support to prevent CSRF / XSRF

fetch

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);

}

Advantages and disadvantages:

fetcht only network requests being given to 400,500 are as successful request, the package needs to deal
fetch default will not take cookie, you need to add configuration items
fetch does not support abort, does not support timeout control, use setTimeout and achieve the Promise.reject the request timeout control does not stop the process continues to run in the background, causing the amount of waste
fetch no way to monitor the progress of native request, and can XHR

关于fetch：https://blog.csdn.net/hefeng6500/article/details/81456975

2.bind, call, apply the difference

call and apply all point to this change in order to solve the. The role is the same, just different parameter passing mode.
In addition to the first parameter, call may receive a list of parameters, apply only accepts a parameter array

let a = {
    value: 1
}
function getValue(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
}
getValue.call(a, 'yck', '24')
getValue.apply(a, ['yck', '24'])

bind and the role of the other two methods is the same, but the method returns a function. And we can achieve by currying bind

3.promise

Promise is ES6 new syntax to solve the js callback regional issues.
Promise can be regarded as a state machine. The initial state is pending, can function resolve and reject, the state transition is resolved or rejected state, the state can not be changed once again changes.
then the function returns an instance Promise, and the return value is the previous example, and not a new instance. Because Promise specification in addition to pending state, other states can not change, if the return is an example of the same words, more then call will be meaningless. For then it is, in essence, it can be seen as flatMap

A more detailed article on the teacher's look at Ruan Yifeng: http://es6.ruanyifeng.com/#docs/promise

What is the difference when 4.function and arrow callback function to do, how to change this point

call, apply direct method calls, and change this point, bind only change this point, does not call method