關(guān)于uniapp的request封裝保姆級教程
更新時間：2023年07月07日 08:33:14 作者：還在持續(xù)努力中
這篇文章主要給大家介紹了關(guān)于uniapp的request封裝保姆級教程,request是基于uni-app框架封裝的一個網(wǎng)絡(luò)請求庫,可以用于發(fā)送http請求和處理響應(yīng)數(shù)據(jù),需要的朋友可以參考下
看了前端老張的uniapp視頻，在學(xué)完nodejs之后就可以進(jìn)行接口對接，但是接口對接需要頻繁的寫入相同的url和一些相同的數(shù)據(jù)，所以我們需要進(jìn)行request的封裝，以此減少我們的代碼量，廢話不多說，直接開始
1.首先，我使用的是windows的，因為是本地數(shù)據(jù)，使用ipconfig查詢自己的ip地址：
格式為:http://192.xxx.x.xxx(也有不一樣的，看自己的IPv4就行)
2.拿到我們的ip地址之后，我們在common目錄下創(chuàng)建我們的request.js文件
3.進(jìn)入到文件之后我們開始寫代碼，基于uniapp文檔里#uni.request(OBJECT)的配置作為參考
export default{
common:{
baseUrl:"http://192.xxx.xxxx:3000/api",
data:{},
header:{
"Content-type":"application/json",
"Content-type":"application/x-www-form-urlencoded"
},
methods:"GET",
dataType:"json"
},
request(options={}) {
options.url =this.common.baseUrl+options.url;
options.data =this.common.data || options.data;
options.header =this.common.header || options.header;
options.method =this.common.method || options.method;
options.dataType =this.common.dataType || options.dataType;
return new Promise((res,rej)=>{
uni.request({
...options,
success:(result) =>{
if(result.statusCode != 200){
return rej();
}
let data =result.data;
res(data)
}
})
})
}
}4.引入之前寫的request.js文件，之后在頁面上配置使用就完成了
總結(jié)
到此這篇關(guān)于uniapp的request封裝保姆級教程的文章就介紹到這了,更多相關(guān)uniapp的request封裝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了javascript比較兩個日期相差天數(shù)的方法,涉及javascript針對日期的轉(zhuǎn)換與比較的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
js利用FileReader實現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像
本文主要介紹了js利用FileReader實現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
這篇文章主要介紹了js進(jìn)行表單驗證的方法,實例分析了各種常見的js表單驗證技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript讀取本地文件常用方法流程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
js遍歷table的所有元素的代碼，方便我們控制table的所有元素，顏色，樣式等2008-07-07
JavaScript求一個數(shù)組中重復(fù)出現(xiàn)次數(shù)最多的元素及其下標(biāo)位置示例
這篇文章主要介紹了JavaScript求一個數(shù)組中重復(fù)出現(xiàn)次數(shù)最多的元素及其下標(biāo)位置,涉及javascript數(shù)組元素遍歷、判斷、正則過濾、追加等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
詳解ES6中的 Set Map 數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)
這篇文章主要介紹了詳解ES6中的 Set Map 數(shù)據(jù)結(jié)構(gòu)學(xué)習(xí)總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了基于zepto.js實現(xiàn)手機(jī)相冊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
全選反選checkbox在實際應(yīng)用中比較常見，本文有個不錯的示例，大家可以參考下2014-03-03
這篇文章主要介紹了JavaScript運動減速效果,模擬了物體做減速運動的效果,以兩個實例形式分析了javascript實現(xiàn)物體做減速運動的實現(xiàn)技巧,涉及javascript動態(tài)操作頁面元素樣式及數(shù)學(xué)運算的方法,非常簡潔實用,需要的朋友可以參考下2015-08-08