TIL 43|Axios 2|fetchメソッドとaxiosメソッド
11087 ワード
XMLRequestを使用するか、他のHTTPクライアントを使用する必要があります.axiosはHTTPクライアント・ライブラリでもあるので、axiosライブラリについて理解する必要があります.axiosとFetch APIの比較
Fetch()body property、axiosdatapropertyを使用します.FetchのurlはFetch()関数のパラメータとし、axiosはurlをoptionオブジェクトとする.Fetchbody部分はJSON.stringify()である.Fetch API
fetchメソッドが実行されると、promiseオブジェクトが返されます..thenメソッドはpromiseオブジェクトの組み込みメソッドです.//fetch
const url = 'http://localhost:3000/test';
const option = {
method: 'POST',
header: {
'Accept' : 'application/json',
'Content-Type' : 'application/json';charset=UTP-8'
},
body: JSON.stringify({
name: 'sewon',
age: 20
})
fetch(url, option)
.then(response => console.log(response))axios
//axios
const option = {
url = 'http://localhost:3000/test'
method: 'POST',
header: {
'Accept' : 'application/json',
'Content-Type' : 'application/json';charset=UTP-8'
},
data: {
name: 'sewon',
age: 20
}
}
axios(options)
.then(response => console.log(response))HTTP Methods
GET
import axios from 'axios';
axios.get('http://localhost:3030/yeony/user')
.then(response => console.log(response.data))
.catch(error => console.log(error))POST
GETよりも安全です.import axios from 'axios';
axios.post('http://localhost:3030/yeony/user',
{
contact: 'Yeony',
email: '[email protected]'
},
{
headers: {
'Content-type' : 'application/json',
'Accept' : 'application/json'
}
}
.then(response => console.log(response.data))
.catch(error => console.log(error))DELETE
Deleteメソッドは、HTML FormタグがデフォルトでサポートしているHTTPメソッドではありません.Deleteメソッドは、主にサーバ上のデータベースの内容を削除するために使用されるため、2番目のパラメータはまったく渡されませんimport axios from 'axios';
axios.delete('http://localhost:3030/yeony/user/30')
.then(function(res){
console.log(res);})
.catch(function(ex) {
throw new Error(ex)
}Reference
この問題について(TIL 43|Axios 2|fetchメソッドとaxiosメソッド), 我々は、より多くの情報をここで見つけました https://velog.io/@miyoni/TIL-43テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol