wepy plugin axiosダウンロード - wepy plugin axiosソースコードのダウンロード

wepy plugin axios

AI ソースコード

1.0.0

ダウンロード

wepy-プラグイン-axios

まず第一に、このような素晴らしいライブラリを提供してくれた axios と wepy の作者に感謝します。

これは、小さなプログラムで axios を使用できるようにする wepy プラグインです

axios ドキュメント | wepy ドキュメント

ミニプログラムを作成するにあたり、ミニプログラムに組み込まれているwx.request関数の機能が大幅に制限されていたため、 wepy.requestも元の関数を単純にカプセル化しただけで、axios のような高度な機能を提供することはできませんでした。 in を使用すると、axios のほとんどの機能を小さなプログラムで使用できるようになります。

このプラグインは API を axios のオリジナル API に可能な限り近づけながら、 wx.request 、 wx.uploadFile 、およびwx.downloadFileをカプセル化すると同時に、リクエストキュー機能を提供し、送信制限を解除します。同時に5つのリクエストまで。

気に入ったら、スターを付けてサポートしてください。問題や PR を歓迎します。

インストール

npm または Yarn を使用して axios と wepy-plugin-axios を同時にインストールします

npm install axios wepy-plugin-axios --save
糸追加 axios wepy-plugin-axios

構成

注:このプラグインは wepy とともに使用する必要があります。次の例では wepy または axios の使用方法がわからない場合は、それぞれのドキュメントを最初に読んでください。

wepy を構成する
wepy.config.jsのpluginsにaxios項目を追加します。プラグインにはオプションがありません。オプションとして空のオブジェクトを使用するだけです。
```
 module.exports = {
// ...その他の設定プラグイン: {// ...その他のプラグイン axios: {}
}}
```
注: Wepy によって生成されたデフォルト構成を使用している場合は、ファイルの最後に次のコードがあります。
```
 module.exports.plugin = {
uglifyjs: {// ...
}、
イメミン: {// ...
}}
```
ここでaxios: {}の行を挿入する必要もあります。そうしないと、リリースバージョンの生成時にエラーが発生します。

軸を構成する

wepy-plugin-axios/dist/adapterからアダプターを生成する関数を導入し、この関数に axios のインスタンスを渡してアダプターを取得します。

axios.defaultsまたはaxios.createを使用して、axios のadapterプロパティを設定します (後者が推奨されます)。

 import axios from 'axios'import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter'// アダプターの初期化は他のすべての前に実行する必要があります axios.create constadapter = wepyAxiosAdapter(axios)export default axios.create({
アダプタ: アダプタ // このプロパティは、ミニ プログラムで axios を使用するための鍵です // ...その他のプロパティ})

使用法

以下の例は、上記の内容に従って設定が完了していることを前提としています。

通常のリクエストを送信する

//通常の GET リクエストを送信 axios.get('https://huajingkun.com/api/userinfo')//json データを送信 axios.request({
メソッド: '投稿'、
URL: 'https://huajingkun.com/api/userinfo',
データ: {ニックネーム: '233'
}})//URL コード化されたデータを送信 axios.post('https://huajingkun.com/api/userinfo', { ニックネーム: '233' }, {
ヘッダー: {'content-type': 'application/x-www-form-urlencoded'
}})

ファイルをアップロードする

$uploadフィールドが POST リクエストのデータに表示される場合、このリクエストはファイルアップロードリクエストとみなされます。

 axios.post('https://huajingkun.com/api/avatar', {
$upload: {name: 'avatar',filePath: 'wxfile://sometempfilepath' // wx.chooseImage などのインターフェースからの結果 },
// ...一緒に送信される他のデータ})

ファイルをダウンロードする

GET リクエストのresponseTypeがfileである場合、このリクエストはファイルのダウンロードリクエストとみなされ、ファイルの一時パスが返されます (詳細については、ミニプログラム開発ドキュメントを参照してください)。

注: http プロトコルは現時点でのみ使用できます

axios.get('http://www.baidu.com', { responseType: 'file' }).then(response => {
console.log(response.data) // 正常にダウンロードされたファイルの一時パスを出力します})

リクエストオプション

このプラグインは、ほとんどの axios オプションのサポートを提供し、元の axios API に基づいていくつかの変更も行います。

サポートされていないオプション

注: ミニプログラムのリクエスト機能は制限されているため、次のオプションはサポートされていません。使用中に次のオプションが表示された場合、このリストにない機能は使用できません。

timeout
withCredentials
auth
xsrfCookieName
xsrfHeaderName
onUploadProgress
onDownloadProgress
maxContentLength
maxRedirects
httpAgent
httpsAgent
proxy

限られたオプション

url : プロトコルを指定する必要があります。http または https のみを使用できます。http はファイルのダウンロードにのみ使用できます。
method : ミニプログラムでサポートされるメソッドのみにすることができます (詳細については、ミニプログラム開発ドキュメントを参照してください)
responseType : json 、 text 、 fileのいずれか 1 つだけを指定できます

返される内容

返されるコンテンツは、axios の返されるコンテンツと似ています。

 {
//サーバーから返される応答データ //ダウンロード ファイル リクエストの場合、データ フィールドの内容はファイル データの一時パスです。

// HTTP 応答コードのステータス: 数値、

// サーバーから返される HTTP ヘッダーはすべて小文字です。 // アップロードまたはダウンロード リクエストの場合、ヘッダー フィールドは常に空のオブジェクトです (アプレットは返されるヘッダーの内容を提供しません)。
ヘッダー:オブジェクト、

// axios config: object で使用されるリクエスト オプション,

// wx.request または wx.uploadFile または wx.downloadFile の特定のコンテンツを渡します request: object}

知らせ

wepy の現在のプラグインシステムは十分に完璧ではないため、このプラグインは比較的「汚い」メソッドを使用して axios を wepy で使用できるようにします。

axios ソースファイルを直接変更する

axios ソースファイルlib/defaults.js内のアダプターの定義がlib/plugin.jsで削除されました。axios はブラウザーと Node.js の両方をサポートしているため、wepy はパッケージ化するときに Node.js のネイティブモジュールを無視できません。梱包不良の原因となります。

ただし、wepy プラグインは現時点ではパッケージ化の最後の段階でソースファイルを変更することしかできず、依存関係情報を変更することはできないため、Node.js 用に用意されたコードを無視することはできず、乱暴に削除することしかできません。 XMLHttpRequestミニプログラムでは使用できず、完全にカスタムアダプターを使用する必要があるため、削除後はファイルサイズも小さくなります。

この変更は、アプレットコードが他のコードとnode_modulesフォルダーを共有する場合、他のコードは axios を正常に使用できなくなることを意味します。

プラグインの開発とテスト

wepy には現在エイリアス機能がないため、開発中にプロジェクトフォルダー全体をテストプロジェクトのnode_modulesフォルダーにコピーし、 wepy-plugin-axios/dist/adapter wepy-plugin-axios/lib/adapter.jsに変更することしかできません。 wepy-plugin-axios/lib/adapter.js

コンパイル中に次のコマンドを実行して、 distフォルダーに最終ファイルを取得します。