参考: https://blog.logrocket.com/axios-vs-fetch-best-http-requests/

fetch 用于浏览器网络调试挺方便,但是易用性没 axios 好,如果有大量定制化请求还是得有一个库来封装,方便使用

浏览器已经原生支持 fetch(), 调试网页时已经可以使用

fetch('https://httpbin.org/get')
    .then(res => res.json())
    .then(data => console.log(data));

一次请求多个接口

axios.all([
  axios.get('https://api.github.com/users/iliakan'), 
  axios.get('https://api.github.com/users/taylorotwell')
])
.then(axios.spread((obj1, obj2) => {
  // Both requests are now complete
  console.log(obj1.data.login + ' has ' + obj1.data.public_repos + ' public repos on GitHub');
  console.log(obj2.data.login + ' has ' + obj2.data.public_repos + ' public repos on GitHub');
}));
Promise.all([
  fetch('https://api.github.com/users/iliakan'),
  fetch('https://api.github.com/users/taylorotwell')
])
.then(async([res1, res2]) => {
  const a = await res1.json();
  const b = await res2.json();
  console.log(a.login + ' has ' + a.public_repos + ' public repos on GitHub');
  console.log(b.login + ' has ' + b.public_repos + ' public repos on GitHub');
})
.catch(error => {
  console.log(error);
});

切面, interceptor

axios.interceptors.request.use(config => {
  // log a message before any HTTP request is sent
  console.log('Request was sent');
  return config;
});

axios.interceptors.response.use(config => {
  // log, auth etc..
  console.log('response is done');
  return config;
});

// sent a GET request
axios.get('https://api.github.com/users/sideshowbarker')
  .then(response => {
    console.log(response.data);
  });