$.ajax、axios、fetch とは何ですか? fetchの使い方を詳しく解説

この記事では、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 ほど使いやすいものではありません。

• #fetch 生成された背景?

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

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

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

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

fetch の使用法

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

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

リクエスト パラメータ設定options 詳細については、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. フェッチ リクエストのデフォルトは no です。 cookie

この問題を解決するには、オプション#を行う必要があります。 # # 中規模構成{認証情報: '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)
    })

reject を手動で追加しない場合、

unknown が出力されますが、これは当然のことながら使用するものではありません。 axios この問題を考慮する必要はありません。コードは次のとおりです:

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

fetch optimizationしたがって、

res.text()

メソッドは

promise を返すため、すべてのエラーが統一された形式を返すようにするために、さらに .then を直接呼び出すことができます (すべてが 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的使用后，发现fetch还是一个不错的选择。针对不同使用情况可以作如下处理：

首先，要引入 es5-shim 解决fetch这个新特性的同构；

其次，要引入 es6-promise 解决promise的兼容问题；

然后，引入 fetch-ie8 解决fech的同构问题；

最后，引入 fetch-jsonp 解决跨域问题。

当然，你也不需要针对性的解决这些问题，GitHub团队提供了一个polyfill解决方案，你不需要一步步的是实现。只需要两步：

1. 安装 fetch package

   npm install whatwg-fetch --save

2. 在使用的模块引入 fetch

import 'whatwg-fetch'

window.fetch(url, options)

其他的使用和 fetch 则这个原生的API雷同。

哪些情况可以放弃使用fetch

1. 获取Promsie的状态，如：isRejected, isResolved

2. 如果使用习惯了jquery的progress方法的，或者使用deffered的一些方法

具体 fetch 实现了哪些与jquery类似的方法可参考whatwg-ftch 或者 fetch-issue

以上が$.ajax、axios、fetch とは何ですか? fetchの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。