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

Nguyễn Minh Đức viết ngày 18/05/2018

alt text

Chém gió

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

Async/await là gì ??

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)
}

Cách sử dụng axios

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);
  });

Các sai lầm phổ biến khi sử dụng axios

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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Nguyễn Minh Đức

4 bài viết.
21 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
22 6
(Ảnh) Các công nghệ chính sử dụng trong project Redux Nodejs Cloudinary MongoDB Expressjs Ở project này ta sẽ sử dụng javascript để code cho c...
Nguyễn Minh Đức viết hơn 1 năm trước
22 6
White
11 7
(Ảnh) Phần chém gió giới thiệu Javascript là ngôn ngữ rất si đa và càng học nó mình càng thấy nó sida vcđ, gần đây mình được tiếp xúc được với m...
Nguyễn Minh Đức viết 1 năm trước
11 7
White
8 3
(Ảnh) Tản mạn chém gió Thời nay người ta thường quan tâm tới các công nghệ mới, các công nghệ phát triển như vũ bão cộng thêm hàng loạt các thư viê...
Nguyễn Minh Đức viết 9 tháng trước
8 3
Bài viết liên quan
White
59 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 4 năm trước
59 8
White
8 0
_Có mấy chia sẻ nhỏ, mình muốn đưa ra để mọi người cùng thảo luận góp ý. Thread này không tập trung vào Technical nữa mà discuss về Coding Style & ...
Hùng Phong viết 8 tháng trước
8 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
4 bài viết.
21 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!