Xử lý assynchronous bằng axios và những lầm lẫn hay gặp khi sử dụng aysnc, await và axios

axios là thư viện call api rất tuyệt vời, nó hầu như tương thích với mọi trình duyệt,khi mình sử dụng axios thì hầu như mình chả bao giờ phải dùng promise nữa.axios hỗ trợ cho cả npm ,cdn.. :v nói chung là quá tiện cho ai dùng để call api.
Đây là document của nó

async/await là cú pháp mới của javascript khi lên ES7.Bạn có thể tham khảo tại document của nó mình rất thích sử dụng nó hơn là promise.Vậy tại sao nên dùng nó .Ta xem đoạn code giới đây
Như đoạn code dưới đây ta thấy một promise chỉ try catch đc một lần cho tất cả các callback

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

Đối với await . mỗi callback đều có thể try catch tùy ý

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

axios cung cấp rất cho ta rất nhiều method sẵn nhưng ở trong bài này mình chỉ nhắc đến ba cái phổ biến hay dùng nhất khi mình sử dụng restful api là get ,post, put. mọi method được gọi từ axios đều là bất động bộ vì vậy đề gán cho một biến nào đó ta phải sử dụng async/await
Vd mình muốn gửi request tới server lấy thông tin của một user có id là một chẳng hạn thì:

axios.get('/user', {
    params: {
      id: 1
    }
  })
  .then(function (response) {
//response là biến chứa toàn bộ thông tin user
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Dưới đây mình nêu ra các sai lầm khi mình sử dụng axios ,thực ra sai lầm nên cũng tương tự như khi sử dụng promise nếu bạn nào đã dùng rồi chắc sẽ biết
Thứ 1:

function TestAxios(){
  const data=axios.get('/user', {
      params: {
        id: 1
      }
    })
    .then(function (response) {
  //response là biến chứa toàn bộ thông tin user
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  return data;
}

Ok ở đây hàm này sẽ chả trả về cho bạn cái mịa gì hết vì axios.get là hàm bất động bộ. Nó chưa load data về thì đã gán cho thằng data và return con mịa nó rồi. Vậy ở đây để gán cho data. Thì ta sử lại code đoạn này chút : ))).

async function TestAxios(){
  const data=await axios.get('/user', {
      params: {
        id: 1
      }
    })
    .then(function (response) {
  //response là biến chứa toàn bộ thông tin user
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });
  return data;
}

Nếu không muốn sử dụng await/async thì ta có thể return ngay trong then

 function TestAxios(){
 axios.get('/user', {
      params: {
        id: 1
      }
    })
    .then(function (response) {
  //response là biến chứa toàn bộ thông tin user
      console.log(response);
      return response;
    })
    .catch(function (error) {
      console.log(error);
    });

}

Nói chung bài viết chỉ thế thôi. Bác nào có lỗi gì gặp mà chưa có ở trên thì cmt ở dưới cho em ý kiến.