序文
過去2日間、会社でログインを書いていたときに、fetchリクエストと元の実装リクエストの方法をほとんど忘れていたことがわかりました。あまり長く読んでいないと推定されます。の方法を記録します。後で確認できるように、ここでhttpリクエストを開始します。
1.ネイティブリクエスト
実際のプロジェクト開発でネイティブajaxを使用することはめったにありませんが、ネイティブajaxの記述方法を知る必要があります。
let xhr = new XMLHttpRequest();
xhr.open('GET','url',true)；
xhr.onReadyState(()=>{
})
2、jqueryajaxリクエスト
結局のところ、jqueryajaxはまだ古いです。jqueryとともに崩壊しました。フロントエンドフレームワークとネイティブjsの急速な台頭により、元々jqueryに属していた王朝時代は死んだと宣言されました。もちろん、jqueryajaxは依然として非常に有用でした。その時代に。利点を見てください。
元の構文よりも簡潔であるという1つの利点に加えて、独自の操作domの単純さとチェーン操作しか考えられません。
// get
$.ajax({
method: 'GET'
url:url,
success:(data)=>{
console.log(data)
}
});
// post
$.ajax({
method: 'POST'
url:url,
data:'yourData',
success:(data)=>{
console.log(data)
}
})
3、フェッチリクエスト
FetchはAjaxの代わりになりましたが、そうは思いません。fetchはカプセル化されていないネイティブリクエストメソッドです。つまり、開発者はプロジェクトのサイズを増やすことなく、フェッチを自分でカプセル化できます。では、なぜフェッチがajaxを置き換えることができるのでしょうか。
利点は次のとおりです
。1。簡潔な構文とよりセマンティック
2.標準のPromise実装に基づいて、async / awaitをサポートし
ます3.同型フェッチを使用した便利な同型
次にフェッチ要求の方法を見てみましょう、私は自分の文章を添付します後でフェッチリクエスト
fetch(url,{
method:'POST',//'GET'
mode:'cors',// 跨域请求
header: new Headers({
'Content-Type': 'application/json',
}),
body:'yourData'
}).then(data=>{
let res = data.json();
res.then(data=>{
console.log(`ok${
data}`)//到此数据就拿到了
})
})
4、axiosリクエスト
axiosリクエストは実際にはXMLHttpRequestリクエストですが、promiseカプセル化を使用して実装されます。すべての主要なフレームワークが統合されて、データを要求するためにaxiosを推奨するため、axiosが主流になりました。
利点は次のとおりです
。1。PromiseAPIをサポート
します。2。クライアントから防止します。3 。CSRF
同時リクエストAPIを提供します。
次に、axiosの使用法を見てみましょう。
async getUserList(){
let res = await axios.get(url)
}
// 或者
axios.get(url).then(data=>{
console.log(data)
})
//当然post也可以这样
async addUser(){
let res = await axios.post(url,{
data:'yourData'
})
}
const server_url = "www.baidu.com"
const header = {
'content-type':'application-json'
}
const http = {
get(url) {
return new Promise((resolve, reject) => {
fetch(server_url+url,{
mode:"cors",
// credentials:'include',
}).then(res => {
res.json().then(resData => {
resolve(resData);
})
}).catch(err => {
console.log("err:"+err);
reject(err);
})
})
},
post(url,params){
return new Promise((resolve,reject)=>{
fetch(server_url+url,{
headers: header,
mode: 'cors',
method: 'POST',
body: JSON.stringify(params),
}).then(res => {
res.json().then(resData => {
resolve(resData)
})
}).catch(err => {
console.log("err:"+err);
reject(err);
})
})
}
}
総括する
今のところリクエストする方法はたくさんありますが、プロジェクトが大きくならないように、プロジェクトに応じて適切な方法を選択する必要があります。もちろん、個人的なプロジェクトではそれほど多くのことを考慮する必要はありません。それは良いことです。あなたの個人的な習慣に応じてリクエスト方法を選択します。