$.ajax、axios、fetch の簡単な紹介 (コード付き)

この記事では、$.ajax、axios、および fetch について簡単に説明します (コード付き)。必要な方は参考にしていただければ幸いです。

Ajax とは何ですか?

回答: Ajax は、ブラウザとサーバーの間で非同期データ転送 (HTTP リクエスト) を使用できるテクノロジーです。これを使用すると、ページ全体を更新することなく、ページが少量のデータを要求できるようになります。従来のページ (Ajax を使用しない) でコンテンツの一部を更新するには、Web ページ全体を再読み込みする必要があります。

Ajax は何をベースにしていますか?

回答: XMLHttpRequest (XHR) に基づいています。これは比較的大雑把な API であり、関心の分離 (Separation of Concerns) の設計原則に準拠していないため、設定や使用がそれほど簡単ではありません。

$.ajax の背景?

回答: 上記の理由から、さまざまな ajax ライブラリが参照されていますが、最も有名なものは jQuery API の $.ajax() です。 $.ajax() の利点の 1 つは非同期操作ですが、jQuery の非同期操作はイベントベースの非同期モデルであり、Promise ほど使いやすいものではありません。

生成された背景を取得しますか?

回答: 上記のさまざまな要因に基づいて、フェッチ API が誕生しました。しかし、使いやすく、いくつかの問題があり (この問題については後で詳しく説明し、対応する解決策も説明します)、互換性の問題 (IE はまったくサポートしていません) もあるため、多くの開発者が axios を使用しています。 . 三者ライブラリ。

Promise (axios) をサポートするライブラリ?

回答: axios ライブラリは現在、比較的一般的な業界ソリューションです。axios の人気の理由の 1 つは約束であり、もう 1 つの理由はデータ操作に基づくライブラリ (vue.js、angular.js、従来の jQuery は DOM 操作に基づいたライブラリです。しかし、これには欠点もあります。つまり、使用する前に、ライブラリが導入されていることを確認する必要があります。

実のところ、個人的には、今でも fetch を使用することを好みます。開発中に互換性の問題が発生した場合は、追加のライブラリを導入せずに、同形フェッチのみが必要です。フェッチに焦点を当てましょう。

fetch の使用法

fetch(url, options)
    .then(response => console.log(responese))
    .catch(err => console.log(err))

url: アクセス アドレス
options: 共通構成パラメータ
response: request return object

リクエスト パラメータオプションの構成の詳細については、MDN fetch を参照してください。

フェッチの問題と解決策

1. データを取得するには 2 つの手順が必要です

fetch('https://api.github.com/users/lvzhenbang/repos')
    .then(res => {
        console.log(res)
        return res.text()
    }).then(data => {
        console.log(data)
    })

上記のコードを見ると、直接印刷によって返される Response オブジェクトにデータがまったくないことがわかります。必要なデータを取得するには、中間メソッド response.text を経由する必要があります。 () (fetch 5 メソッドによって提供されます)

一方、axios が返す Response オブジェクトには data 属性が含まれており、非常に使いやすいです。参考コードは以下のとおりです。

axios.get('https://api.github.com/users/lvzhenbang/repos')
    .then(res => console.log(res));

もちろん、大きな問題ではありませんが、使用するのが少し面倒です。

1. フェッチ リクエストにはデフォルトでは Cookie がありません。

この問題を解決するには、オプションで {credentials: 'include'} を設定する必要があります。

1。すべてのリクエストが拒否されるわけではありません。

つまり、エラーがステータス コード (404、500 など) の形式で表現できる場合、catch メソッドはすべてのエラーをキャッチできません。 、fetch によって返される Promise には拒否がありません。Catch は、ネットワーク障害が発生した場合、またはリクエストがブロックされた場合にのみ有効です。

この問題を解決するには、Response オブジェクトの ok が true であるかどうかを判断し、そうでない場合は、Promise を使用して手動で拒否を追加します。参照コードは次のとおりです。

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        if (res.ok) {
            return res.text()
        } else {
            return Promise.reject('请求失败')
        }
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

手動で拒否を追加しない場合は、未定義が出力されますが、もちろん、axios を使用する場合は、この問題を考慮する必要はありません。コードは次のとおりです。

axios.get('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => console.log(res))
    .catch(err => console.log(err));

fetch の最適化

res.text() メソッドは Promise を返すため、さらに .then を直接呼び出すことができます。すべてのエラーが統一された形式を返すようにする (すべてが A Promise を返す) ために、上記のコードを次のように最適化できます:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(res => {
        return res.text()
            .then(data => {
                if (res.ok) {
                    return data
                } elese {
                    return Promise.reject(json)
                }
            })
    }).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

Express/KOA をプレイしたことがある生徒、またはバックエンドについてある程度の理解がある生徒場合によってはサーバーがプロンプト情報を返すことも知っていますが、どのように対処すればよいでしょうか。一般的なエラー プロンプトにはステータス コード (status) とプロンプト メッセージ (msg) が含まれます。コードは次のように変更されます。

server:

res.status(404).send({
    err: 'not found'
})

client:

fetch('https://api.github.com/usrs/lvzhenbang/repos')
    .then(handleResponse).then(data => {
        console.log(data)
    }).catch(err => {
        console.log(err)
    })

function handleResponse (res) { 
    return Promise.reject(Object.assign({}, res.text(), {
        status: res.status,
        msg: res.statusText
    }))
}

互換性のあるソリューション

上記の問題を解決し、フェッチの使用を最適化した後でも、フェッチが依然として適切な選択肢であることがわかりました。さまざまな使用状況に応じて次の処理を実行できます。

まず、fetch の新機能の同型性を解決するために es5-shim を導入する必要があります。

次に、es6-promise を導入する必要があります。 Promise の互換性の問題を解決するために、

次に、fech の同型性の問題を解決するために fetch-ie8 が導入されます。

最後に、クロスドメインの問題を解決するために fetch-jsonp が導入されます。

もちろん、これらの問題を具体的に解決する必要はありません。GitHub チームはポリフィル ソリューションを提供しており、それを段階的に実装する必要はありません。必要な手順は 2 つだけです:

1. fetch パッケージのインストール
   

   npm install whatwg-fetch --save

2. 使用するモジュールは fetch
   

import 'whatwg-fetch'

window.fetch(url, options)

で、その他の使用方法は fetch と同じです。

fetch の使用を放棄できる場合は次のとおりです。

Promsie のステータス (isRejected、isResolved など) を取得します。

jquery の progress メソッドに慣れている場合、または遅延されたメソッドを使用します。

fetch によって実装された jquery に似た特定のメソッドについては、whatwg-ftch または fetch-issue

以上が$.ajax、axios、fetch の簡単な紹介 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。