wepy plugin axios下載 - wepy plugin axios源碼下載

wepy plugin axios

Ai源碼

1.0.0

下載

wepy-plugin-axios

首先感謝axios 和wepy 的作者提供了這麼讚的函式庫！

這是一個能夠讓你在小程式中使用axios 的wepy 插件

axios文檔| wepy文檔

在製作小程式的時候，小程式內建的wx.request函數功能嚴重受限. 即使是wepy.request也只是對原來的函數進行簡單的封裝, 並不能提供像axios 類似的高級功能. 所以我製作了這個外掛程式來讓小程式中可以使用axios 的大部分功能.

在保持API 盡可能貼近axios 原始API 的情況下, 本插件對wx.request , wx.uploadFile , wx.downloadFile進行了封裝. 同時提供了請求隊列功能, 解除了最多同時只發送5個請求的限制.

喜歡就給個Star 支持一下吧? 歡迎開issue 和PR

安裝

使用npm 或yarn 同時安裝axios 和wepy-plugin-axios

 npm install axios wepy-plugin-axios --save
yarn add axios wepy-plugin-axios

配置

注意:本插件必須配合wepy 使用. 下面的例子使用的均為最新版本的wepy. 如果你還不會用wepy 或axios, 請先閱讀它們各自的文檔

配置wepy
在wepy.config.js的plugins中加入axios項目. 插件沒有選項,使用空物件作為選項即可
```
module.exports = {
// ...其它配置 plugins: {// ...其它插件axios: {}
}}
```
注意: 如果你使用的是wepy 產生的預設設定, 在檔案的最後面有下面這樣的程式碼:
```
 module.exports.plugin = {
uglifyjs: {// ...
},
imagemin: {// ...
}}
```
這裡也同樣要插入一行axios: {} , 否則在生成發布版本時將產生錯誤

配置axios

從wepy-plugin-axios/dist/adapter處引入一個用於生成adapter 的函數, 然後向這個函數傳入axios 的實例即可得到一個adapter

利用axios.defaults或axios.create來設定axios 的adapter屬性(推薦後者)

 import axios from 'axios'import wepyAxiosAdapter from 'wepy-plugin-axios/dist/adapter'// adapter 的初始化一定要在任何其它的 axios.create 之前執行const adapter = wepyAxiosAdapter(axios)export aultaultios.
adapter: adapter // 此屬性為可以在小程式中使用 axios 的關鍵 // ...其它屬性})

用法

下面的例子假定已經根據上面的內容配置完畢

發送普通請求

// 發送普通 GET 請求axios.get('https://huajingkun.com/api/userinfo')// 發送 json 資料axios.request({
method: 'post',
url: 'https://huajingkun.com/api/userinfo',
data: {nickname: '233'
}})// 發送 urlencoded 資料axios.post('https://huajingkun.com/api/userinfo', { nickname: '233' }, {
headers: {'content-type': 'application/x-www-form-urlencoded'
}})

上傳文件

如果在POST 請求的資料中出現了$upload字段，則將此請求視為上傳文件請求

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中的一個

返回內容

返回內容與axios 返回內容相似:

 {
// 伺服器傳回的回應資料 // 對於下載檔案請求, data 欄位的內容為檔案的暫存路徑 data: object | string | any,

// HTTP 回應碼 status: number,

// 伺服器傳回的 HTTP 頭部. 所有的頭部名稱都為小寫 // 對於上傳或下載請求, headers 欄位始終為空物件 (小程式沒有提供傳回的頭部內容)
headers: object,

// axios 使用的請求選項 config: object,

// 傳入 wx.request 或 wx.uploadFile 或 wx.downloadFile 的具體內容 request: object}

注意

由於目前wepy 的插件系統還不夠完善, 所以本插件使用了比較「髒」的方法來讓axios 可以在wepy 中使用:

直接修改axios 原始檔

在lib/plugin.js中刪除了axios 來源檔案lib/defaults.js中有關adapters 的定義. 由於axios 是同時支援瀏覽器和Node.js 的, 但wepy 在打包時無法忽略Node.js 的原生模組,所以會導致打包失敗

但wepy 的插件目前只能在打包的最後一步中對原始檔案進行修改, 不能修改依賴關係資訊, 也就無法忽略為Node.js 準備的程式碼, 所以只能粗暴地刪除它. 瀏覽器斷的程式碼也順便刪除了, 因為小程式中不能使用XMLHttpRequest , 必須完全使用自訂的adapter, 刪除後還可以減小檔案體積

這樣的修改意味著, 如果你的小程式碼和其它程式碼共用一個node_modules資料夾的話, 其它程式碼將無法正常使用axios