基于小程序請求接口wx.request封裝的類axios請求
Introduction
- wx.request 的配置、axios 的調(diào)用方式
- 源碼戳我
feature
- 支持 wx.request 所有配置項
- 支持 axios 調(diào)用方式
- 支持 自定義 baseUrl
- 支持 自定義響應狀態(tài)碼對應 resolve 或 reject 狀態(tài)
- 支持 對響應(resolve/reject)分別做統(tǒng)一的額外處理
- 支持 轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù)
- 支持 請求緩存(內(nèi)存或本地緩存),可設置緩存標記、過期時間
use
app.js @onLaunch
import axios form 'axios'
axios.creat({
header: {
content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
baseUrl: 'https://api.baseurl.com',
...
});
page.js
axios
.post("/url", { id: 123 })
.then((res) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
API
axios(config) - 默認get
axios(url[, config]) - 默認get
axios.get(url[, config])
axios.post(url[, data[, config]])
axios.cache(url[, data[, config]]) - 緩存請求(內(nèi)存)
axios.cache.storage(url[, data[, config]]) - 緩存請求(內(nèi)存 & local storage)
axios.creat(config) - 初始化定制配置,覆蓋默認配置
config
默認配置項說明
export default {
// 請求接口地址
url: undefined,
// 請求的參數(shù)
data: {},
// 請求的 header
header: "application/json",
// 超時時間,單位為毫秒
timeout: undefined,
// HTTP 請求方法
method: "GET",
// 返回的數(shù)據(jù)格式
dataType: "json",
// 響應的數(shù)據(jù)類型
responseType: "text",
// 開啟 http2
enableHttp2: false,
// 開啟 quic
enableQuic: false,
// 開啟 cache
enableCache: false,
/** 以上為wx.request的可配置項,參考 https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html */
/** 以下為wx.request沒有的新增配置項 */
// {String} baseURL` 將自動加在 `url` 前面,可以通過設置一個 `baseURL` 便于傳遞相對 URL
baseUrl: "",
// {Function} (同axios的validateStatus)定義對于給定的HTTP 響應狀態(tài)碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`),promise 將被 resolve; 否則,promise 將被 reject
validateStatus: undefined,
// {Function} 請求參數(shù)包裹(類似axios的transformRequest),通過它可統(tǒng)一補充請求參數(shù)需要的額外信息(appInfo/pageInfo/場景值...),需return data
transformRequest: undefined,
// {Function} resolve狀態(tài)下響應數(shù)據(jù)包裹(類似axios的transformResponse),通過它可統(tǒng)一處理響應數(shù)據(jù),需return res
transformResponse: undefined,
// {Function} resolve狀態(tài)包裹,通過它可做接口resolve狀態(tài)的統(tǒng)一處理
resolveWrap: undefined,
// {Function} reject狀態(tài)包裹,通過它可做接口reject狀態(tài)的統(tǒng)一處理
rejectWrap: undefined,
// {Boolean} _config.useCache 是否開啟緩存
useCache: false,
// {String} _config.cacheName 緩存唯一key值,默認使用url&data生成
cacheName: undefined,
// {Boolean} _config.cacheStorage 是否開啟本地緩存
cacheStorage: false,
// {Any} _config.cacheLabel 緩存標志,請求前會對比該標志是否變化來決定是否使用緩存,可用useCache替代
cacheLabel: undefined,
// {Number} _config.cacheExpireTime 緩存時長,計算緩存過期時間,單位-秒
cacheExpireTime: undefined,
};
實現(xiàn)
axios.js
import Axios from "./axios.class.js";
// 創(chuàng)建axios實例
const axiosInstance = new Axios();
// 獲取基礎請求axios
const { axios } = axiosInstance;
// 將實例的方法bind到基礎請求axios上,達到支持請求別名的目的
axios.creat = axiosInstance.creat.bind(axiosInstance);
axios.get = axiosInstance.get.bind(axiosInstance);
axios.post = axiosInstance.post.bind(axiosInstance);
axios.cache = axiosInstance.cache.bind(axiosInstance);
axios.cache.storage = axiosInstance.storage.bind(axiosInstance);
Axios class
初始化
- defaultConfig 默認配置,即 defaults.js
- axios.creat 用戶配置覆蓋默認配置
- 注意配置初始化后 mergeConfig 不能被污染,config 需通過參數(shù)傳遞
constructor(config = defaults) {
this.defaultConfig = config;
}
creat(_config = {}) {
this.defaultConfig = mergeConfig(this.defaultConfig, _config);
}
請求別名
- axios 兼容 axios(config) 或 axios(url[, config]);
- 別名都只是 config 合并,最終都通過 axios.requst()發(fā)起請求;
axios($1 = {}, $2 = {}) {
let config = $1;
// 兼容axios(url[, config])方式
if (typeof $1 === 'string') {
config = $2;
config.url = $1;
}
return this.request(config);
}
post(url, data = {}, _config = {}) {
const config = {
..._config,
url,
data,
method: 'POST',
};
return this.request(config);
}
請求方法 _request
請求配置預處理
- 實現(xiàn) baseUrl
- 實現(xiàn) transformRequest(轉(zhuǎn)換請求數(shù)據(jù))
_request(_config = {}) {
let config = mergeConfig(this.defaultConfig, _config);
const { baseUrl, url, header, data = {}, transformRequest } = config;
const computedConfig = {
header: {
'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
...header,
},
...(baseUrl && {
url: combineUrl(url, baseUrl),
}),
...(transformRequest &&
typeof transformRequest === 'function' && {
data: transformRequest(data),
}),
};
config = mergeConfig(config, computedConfig);
return wxRequest(config);
}
wx.request
發(fā)起請求、處理響應
- 實現(xiàn) validateStatus(狀態(tài)碼映射 resolve)
- 實現(xiàn) transformResponse(轉(zhuǎn)換響應數(shù)據(jù))
- 實現(xiàn) resolveWrap、rejectWrap(響應狀態(tài)處理)
export default function wxRequest(config) {
return new Promise((resolve, reject) => {
wx.request({
...config,
success(res) {
const {
resolveWrap,
rejectWrap,
transformResponse,
validateStatus,
} = config;
if ((validateStatus && validateStatus(res)) || ifSuccess(res)) {
const _resolve = resolveWrap ? resolveWrap(res) : res;
return resolve(
transformResponse ? transformResponse(_resolve) : _resolve
);
}
return reject(rejectWrap ? rejectWrap(res) : res);
},
fail(res) {
const { rejectWrap } = config;
reject(rejectWrap ? rejectWrap(res) : res);
},
});
});
}
請求緩存的實現(xiàn)
- 默認使用內(nèi)存緩存,可配置使用 localStorage
- 封裝了 Storage 與 Buffer 類,與 Map 接口一致:get/set/delete
- 支持緩存標記&過期時間
- 緩存唯一 key 值,默認使用 url&data 生成,無需指定
import Buffer from '../utils/cache/Buffer';
import Storage from '../utils/cache/Storage';
import StorageMap from '../utils/cache/StorageMap';
/**
* 請求緩存api,緩存于本地緩存中
*/
storage(url, data = {}, _config = {}) {
const config = {
..._config,
url,
data,
method: 'POST',
cacheStorage: true,
};
return this._cache(config);
}
/**
* 請求緩存
* @param {Object} _config 配置
* @param {Boolean} _config.useCache 是否開啟緩存
* @param {String} _config.cacheName 緩存唯一key值,默認使用url&data生成
* @param {Boolean} _config.cacheStorage 是否開啟本地緩存
* @param {Any} _config.cacheLabel 緩存標志,請求前會對比該標志是否變化來決定是否使用緩存,可用useCache替代
* @param {Number} _config.cacheExpireTime 緩存時長,計算緩存過期時間,單位-秒
*/
_cache(_config) {
const {
url = '',
data = {},
useCache = true,
cacheName: _cacheName,
cacheStorage,
cacheLabel,
cacheExpireTime,
} = _config;
const computedCacheName = _cacheName || `${url}#${JSON.stringify(data)}`;
const cacheName = StorageMap.getCacheName(computedCacheName);
// return buffer
if (useCache && Buffer.has(cacheName, cacheLabel)) {
return Buffer.get(cacheName);
}
// return storage
if (useCache && cacheStorage) {
if (Storage.has(cacheName, cacheLabel)) {
const data = Storage.get(cacheName);
// storage => buffer
Buffer.set(
cacheName,
Promise.resolve(data),
cacheExpireTime,
cacheLabel
);
return Promise.resolve(data);
}
}
const curPromise = new Promise((resolve, reject) => {
const handleFunc = (res) => {
// do storage
if (useCache && cacheStorage) {
Storage.set(cacheName, res, cacheExpireTime, cacheLabel);
}
return res;
};
this._request(_config)
.then((res) => {
resolve(handleFunc(res));
})
.catch(reject);
});
// do buffer
Buffer.set(cacheName, curPromise, cacheExpireTime, cacheLabel);
return curPromise;
}
到此這篇關于基于小程序請求接口wx.request封裝的類axios請求的文章就介紹到這了,更多相關小程序 wx.request封裝類axios請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS+AJAX實現(xiàn)省市區(qū)的下拉列表聯(lián)動
這篇文章主要為大家詳細介紹了JS+AJAX實現(xiàn)省市區(qū)的下拉列表聯(lián)動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
JavaScript實現(xiàn)定時隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實現(xiàn)定時隱藏與顯示圖片的方法,可實現(xiàn)javascript定時關閉圖片的功能,涉及javascript針對頁面元素屬性定時操作的相關技巧,需要的朋友可以參考下2015-08-08
js使用split函數(shù)按照多個字符對字符串進行分割的方法
這篇文章主要介紹了js使用split函數(shù)按照多個字符對字符串進行分割的方法,實例分析了split函數(shù)的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
uniapp使用u-upload組件來實現(xiàn)圖片上傳功能
最近在用uniapp開發(fā)微信小程序,下面這篇文章主要給大家介紹了關于uniapp使用u-upload組件來實現(xiàn)圖片上傳功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01

