2016-09-19 27 views
10

Tôi biết rằng với Fetch API mới (sử dụng ở đây với ES2017 của async/await), bạn có thể làm cho một yêu cầu GET như thế này:Yêu cầu POST với API tìm nạp?

async getData() { 
    try { 
     let response = await fetch('https://example.com/api'); 
     let responseJson = await response.json(); 
     console.log(responseJson); 
    } catch(error) { 
     console.error(error); 
    } 
} 

Nhưng làm thế nào để bạn thực hiện một yêu cầu POST?

+2

Bạn đang sắp xếp hai thứ khác nhau: JavaScript sắp tới 'async'/'await', và (hoàn toàn riêng biệt) [Fetch API] (https://fetch.spec.whatwg.org/). Câu hỏi của bạn không liên quan gì đến 'async'/'await' của JavaScript, đó là về' fetch'. (Cũng lưu ý rằng API Fetch mới chính xác là mới, và vì vậy [hỗ trợ được giới hạn ở các trình duyệt tiên tiến] (http://caniuse.com/#feat=fetch).) –

+0

@ jfriend00: Tôi đã làm nó cho chúng. –

Trả lời

23

câu chuyện dài ngắn, Fetch cũng cho phép bạn vượt qua một đối tượng cho một yêu cầu cá nhân hơn:

fetch("http://example.com/api/endpoint/", { 
    method: "post", 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/json' 
    }, 

    //make sure to serialize your JSON body 
    body: JSON.stringify({ 
    name: myName, 
    password: myPassword 
    }) 
}) 
.then((response) => { 
    //do something awesome that makes the world a better place 
}); 

Kiểm tra ra lấy tài liệu cho hơn goodies và gotchas:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Xin lưu ý rằng vì bạn đang thực hiện mẫu thử try/catch không đồng bộ, bạn sẽ chỉ bỏ qua hàm then() trong ví dụ của mình;)

4

nếu bạn muốn thực hiện yêu cầu đăng đơn giản mà không gửi dữ liệu dưới dạng JSON.

fetch("/url-to-post",{ 
     method: "POST", 
     //what ever data you want to post with key value pair   
     body: "name=manas&age=20", 
     headers: { 
      "Content-Type": "application/x-www-form-urlencoded" 
     }).then((response) => { 
     //do something awesome that makes the world a better place 
});