uni app請求封裝

ajax封裝

在src下建立資料夾，如uilts資料夾

建立request.js檔案。用於封裝ajax請求

request.js**如下:

export
default
function
(url
,data=,
method
="get")}
)}

函式裡面的形參各表示：

url ：將被呼叫的url形參，

data：需要傳入引數的形參（為什麼傳入的是乙個空物件呢？原因：是因為在呼叫介面時，某些介面是不需要傳入引數的），

method：請求的方法。預設為get請求

假設有index.vue的元件發請求時如下：

1.
引入封裝ajax請求的檔案
import
request
from
'@/request.js';/
/引入檔案路徑按封裝的請求檔案路徑而定，此處為演示
export
default
(data()
},methods:
})

這裡有個小問題，當我發起請求的時候，雖然已經拿到了資料，但是需要返回乙個結果,將結果給到data的imagelist資料，實現渲染

修改**如下：

request.js

export
default
function
(url
,data=,
methods
='get'),
fail:
(error)=
>})
})}

index.vue

import request from '@/request.js' export default (methods:}, //獲取詳情介面// 由於封裝好的請求是通過返回promise物件的形式// 那麼在請求介面的時候可以考慮使用async /await來執行非同步請求操作// async代表的是可執行的非同步函式 async getdetail()

})

優化目的

async getdetail() //由於url看起來過長，並且當埠，網域名稱，協議這些是固定的時候，可以簡寫如下 request ('/getdeatail' ,data)/

/那麼需要怎麼簡寫成以上的請求呢？

優化方法

在src -> uilts資料夾建立config.js，將埠，網域名稱，協議暴露出來

export default

引入config.js檔案

import
config
from
'./config.js'
export
default
function
(url
,data=,
methods
='get'),
fail:
(error)=
>})
})}

index.vue

import
request
from
'@/request.js'
export
default
(methods:},
async
getdetail()
})

為什麼要將埠，網域名稱，協議單獨寫在乙個檔案裡面呢?

原因：如果埠，協議，網域名稱需要修改時，在request.js視為單純的ajax請求的函式，最好是什麼都不要去修改它。盡可能的降低耦合度。那麼需要修改的埠，網域名稱以及協議單獨的拿出來寫在這個config.js檔案裡面。當檔案裡發生改變時，則會動態修改request.js裡面的url

node介面測試封裝是否成功

[,,
,,,,
,,]

在test_server資料夾下建立server.js檔案，配置介面

**如下：

//
引入koa框架以及路由
letkoa
=require
('koa');
letkoarouter
=require
('koa-router');
//生成應用以及路由例項
const
=new
koa();
const
router
=new
koarouter()
;//核心**//
測試介面
router
.get
('/',(
ctx,
next)=
>)/
/介面letdatas
=require
('./datas/data.json')/
/引入的json檔案按自己實際建立的檔案路徑位置為準，此處為演示
router
.get
('/getdetail',(
ctx,
next)=
>)/
/使用路由器以及路由
.use
(router
.routes()
);//
宣告使用路由
.use
(router
.allowedmethods()
);//
允許使用路由的方法//
監聽埠
.listen
('3000',(
)=>
)

最後開啟伺服器視窗，執行node server.js命令，將url輸入到瀏覽器。如下

123//req後面是需要傳入引數

uni app請求封裝

uniapp封裝網路請求

uniapp雲開發請求封裝

uni app封裝網路請求promise

uni app請求封裝

uniapp封裝網路請求

uniapp雲開發請求封裝

uni app封裝網路請求promise

相關推薦