微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解
背景
小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個(gè)程序與服務(wù)端交互的完整鏈路,但需要大量的定制化代碼,才能實(shí)現(xiàn)請(qǐng)求攔截和響應(yīng)攔截,不太符合大多數(shù)開發(fā)者的使用習(xí)慣,對(duì)于前端開發(fā)者來說,網(wǎng)絡(luò)層還得是axios。
本片主要講一下小程序網(wǎng)絡(luò)層使用axios的簡要總結(jié),這是一個(gè)最精簡的一個(gè)demo,大家可以在這個(gè)基礎(chǔ)上去擴(kuò)充實(shí)踐。
依賴
這邊需要注意的是使用uni-vue3版本時(shí)axios的版本需要0.26.0以下,建議鎖版本
npm i axios@0.26.0 axios-miniprogram-adapter
&&
yarn add axios@0.26.0 axios-miniprogram-adapter
axios-miniprogram-adapter
這個(gè)依賴主要是適配小程序網(wǎng)絡(luò)請(qǐng)求的適配器,這個(gè)適配器的原理大家感興趣可以去了解一下,簡單來說**,axios在發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)會(huì)先判斷用戶是否定義的適配器,如果定義了那就使用適配器發(fā)起網(wǎng)絡(luò)請(qǐng)求,如果沒有定義它會(huì)前判斷環(huán)境,node環(huán)境使用http(與服務(wù)端一致),瀏覽器環(huán)境使用xhr(高版本可能用fetch,具體是否用大家可以看一下源碼)。**所以可以得出一個(gè)優(yōu)先級(jí) adapter >http(node)或xhr(瀏覽器)。
最簡demo
import axios, { AxiosRequestConfig } from 'axios'; import mpAdapter from 'axios-miniprogram-adapter' import { globalConfig } from '../config'; // base_url const baseURL = globalConfig.BASE_URL; // @ts-ignore // 適配器 axios.defaults.adapter = mpAdapter // axios初始化實(shí)例 const axiosIns = axios.create({ baseURL, timeout: 10000, }); // request 請(qǐng)求攔截器,處理邏輯 axiosIns.interceptors.request.use( async (axiosConfig) => { const config = axiosConfig as any; config.headers = { contentType: 'application/json;charset=UTF-8', }; return config; }, (error) => { return Promise.reject(error); }, ); // response攔截器 axiosIns.interceptors.response.use( (response) => { const responData = response.data; const { rtnFlag } = responData; // 判斷業(yè)務(wù)是否成功 if (rtnFlag !== '9999') { // 失敗 return Promise.reject(responData); } // 成功 return Promise.resolve(responData); }, (err) => { return Promise.reject(err); }, ); export default axiosIns
自定義適配器
如果不用axios-miniprogram-adapter這個(gè)依賴,大家也可以如下自定義適配器,這個(gè)在uni、微信、支付中可以通用,但注意uni-vue3版本中axios版本需要0.26.0鎖死(這個(gè)是個(gè)人嘗試的成功版本,有時(shí)間大家可以繼續(xù)探索)
import axios, { AxiosRequestConfig } from 'axios'; import settle from 'axios/lib/core/settle'; import buildURL from 'axios/lib/helpers/buildURL'; // 自定義適配器適配uniapp語法 axios.defaults.adapter = function (config: any) { return new Promise((resolve, reject) => { uni.request({ ...config, method: config.method.toUpperCase(), header:config.headers, url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer), complete: (response: any) => { response = { ...response, config, }; settle(resolve, reject, response); }, }); }); };
到此這篇關(guān)于微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解的文章就介紹到這了,更多相關(guān)小程序與axios網(wǎng)絡(luò)層封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中全局對(duì)象的isNaN()方法使用介紹
全局對(duì)象的isNaN()方法通常用于檢測(cè) parseFloat() 和 parseInt() 的結(jié)果,下面為大家介紹下其具體的使用,感興趣的朋友可以參考下2013-12-12輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了js輕松實(shí)現(xiàn)彈框顯示選項(xiàng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實(shí)例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下2018-12-12URL的參數(shù)中有加號(hào)傳值變?yōu)榭崭竦膯栴}(URL特殊字符)
今天在調(diào)試客戶端向服務(wù)器傳遞參數(shù)時(shí),參數(shù)中的“+”全部變成了空格,原因是URL中默認(rèn)的將“+”號(hào)轉(zhuǎn)義了,經(jīng)過以下步驟解決了,需要的朋友可以參考一下2016-11-11Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2021-11-11