uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解
更新時間：2022年08月06日 14:21:18 作者：imtool
我們在實際工作中要將數(shù)據(jù)傳輸?shù)椒?wù)器端,從服務(wù)器端獲取信息,都是通過接口的形式,下面這篇文章主要給大家介紹了關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的相關(guān)資料,需要的朋友可以參考下
一、uni-app中調(diào)取接口的三種方式
1、uni.request({})
uni.request({
url:'/api/getIndexCarousel.jsp',
method:'get',
success:res=>{
console.log(res.data);
this.carouselData = res.data
}
})2、uni.request({}).then()
uni.request({
url:'/api/getIndexCarousel.jsp',
method:'get',
}).then((result)=>{
let [error,res] = result;
//result將返回一個數(shù)組[error,{NativeData}]
//NativeData：調(diào)取接口后返回的原生數(shù)據(jù)
if(res.statusCode === 200){
this.carouselData = res.data
}
if(res.statusCode === 404){
console.log('請求的接口沒有找到');
}
})
3、async/await
async：用在函數(shù)定義的前面
async request(){ //函數(shù)體;}
await：用在標明了async關(guān)鍵字的函數(shù)內(nèi)部，異步操作的前面。
onLoad() {
this.request();
},
methods: {
async request(){
let result = await uni.request({
url:'/api/getIndexCarousel.jsp'
})
console.log(result)
let [err,res] = result;
if(res.statusCode === 200){
this.carouselData = res.data;
}
}
}二、封裝uni.request();
1、創(chuàng)建一個對象，將該對象掛在Vue的原型下
新建@/common/request.js文件
初步寫法（僅供參考）：
export default {
request(options){
uni.request({
...options,
success:res=>{
console.log(res)
}
})
},
get(url,data={},options={}){
options.url=url,
options.data=data,
options.method='get',
this.request(options)
},
post(url,data={},options={}){
options.url=url,
options.data=data,
options.method='post',
this.request(options)
}
}二次更改：
export default{
//封裝uni.request()：
request(options){
return new Promise((resolve,reject)=>{
//書寫異步操作的代碼
uni.request({
...options,
success:res=>{
if(options.native){
resolve(res) //調(diào)取接口后返回的原生數(shù)據(jù)
}
if(res.statusCode === 200){
resolve(res.data) //異步操作執(zhí)行成功
}else{
console.log('請求的接口沒有找到');
reject(res) //異步操作執(zhí)行失敗
}
}
})
})
},
get(url,data={},options={}){
options.url=url;
options.data=data;
options.method='get';
return this.request(options)
},
post(url,data={},options={}){
options.url=url;
options.data=data;
options.method='post';
return this.request(options)
}
}2、進入main.js文件
import request from '@/common/request.js'; Vue.prototype.$Z = request;
例：在任意文件中書寫下列代碼可以調(diào)用。this.$Z.get();
3、在頁面中調(diào)用
//封裝uni.request()：
this.$Z.get('/api/getIndexCarousel.jsp',{},{
native:false
}).then(res=>{
//異步操作成功
console.log(res)
}).catch(res=>{
//異步操作失敗
console.log(res)
}).finally(res=>{
//異步操作完成
});uniapp的網(wǎng)絡(luò)請求方法
uni.request({
url: 'https://www.example.com/request', //僅為示例，并非真實接口地址。
data: {
name: 'name',
age: 18
},
header: {
'custom-header': 'hello' //自定義請求頭信息
},
success: function (res) {
console.log(res.data);
}
});uniapp網(wǎng)絡(luò)請求的get和post
- 對于 GET 方法，會將數(shù)據(jù)轉(zhuǎn)換為 query string。例如 { name: ‘name’, age: 18 } 轉(zhuǎn)換后的結(jié)果是 name=name&age=18。
- 對于 POST 方法且 header[‘content-type’] 為 application/json 的數(shù)據(jù)，會進行 JSON 序列化。
- 對于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會將數(shù)據(jù)轉(zhuǎn)換為 query string。
請求的 header 中 content-type 默認為 application/json
注意 post請求必須加header[‘content-type’]
uni-app 封裝接口request請求
我們知道一個項目中對于前期架構(gòu)的搭建工作對于后期的制作有多么重要，所以不管做什么項目我們拿到需求后一定要認真的分析一下，要和產(chǎn)品以及后臺溝通好，其中尤為重要的一個環(huán)節(jié)莫過于封裝接口請求了。因為前期封裝好了，后面我們真的可以實現(xiàn)粘貼復制了。所以今天給大家分享一個在uni-app中如何封裝一個request請求。
第一步、根目錄下新建 config.js 文件
const config = {
base_url: '這里可以是生產(chǎn)環(huán)境或者測試環(huán)境'
}
export { config }這里主要配置接口的基本路徑
第二步、根目錄下新建 utils/http.js 文件
import {
config
} from '../config.js'
export const apiResquest = (prams) => { //prams 為我們需要調(diào)用的接口API的參數(shù) 下面會貼具體代碼
// 判斷請求類型
let headerData = {
'content-type': 'application/json'
}
let dataObj = null
//因為我們的GET和POST請求結(jié)構(gòu)不同這里我們做處理，大家根據(jù)自己后臺接口所需結(jié)構(gòu)靈活做調(diào)整吧
if (prams.method === "GET") {
headerData = {
'content-type': 'application/json',
'token': uni.getStorageSync('token')
}
} else {
dataObj = {
'data': prams.query,
'token': uni.getStorageSync('token')
}
}
return new Promise((resolve, reject) => {
let url = config.base_url + prams.url; //請求的網(wǎng)絡(luò)地址和局地的api地址組合
uni.showLoading({
title: '加載中',
mask: true
})
return uni.request({
url: url,
data: dataObj,
method: prams.method,
header: headerData,
success: (res) => {
uni.hideLoading()
//這里是成功的返回碼，大家根據(jù)自己的實際情況調(diào)整
if (res.data.code !== '00000') {
uni.showToast({
title: '獲取數(shù)據(jù)失敗:' + res.data.msg,
duration: 1000,
icon: "none"
})
return;
}
resolve(res.data);
console.log(res.data)
},
fail: (err) => {
reject(err);
console.log(err)
uni.hideLoading()
},
complete: () => {
console.log('請求完成')
uni.hideLoading()
}
});
})
}第三步、 創(chuàng)建model 層 根目錄下新建 models/index.js 文件
——-??注意： 這里可以根據(jù)自己的項目功能需求分解models 層——-
import { apiResquest } from '../utils/http.js'
//POST 請求案例
export const login = (query) => {
return apiResquest({
url: '這里是API的地址',
method: 'POST',
query: {...query}
})
}
//GET 請求案例可以傳遞參數(shù)也可以不傳遞
export const validateCode = (query) => {
let str = query
return apiResquest({
url: `您的API地址 ?${str}`,
method: 'GET'
})
}第四步、頁面中調(diào)用
import { login } from '../../models/index.js'
//頁面中的 methods 里面就可以直接調(diào)用了
Login(){
//這里可以設(shè)置需要傳遞的參數(shù)
let uid = uni.getStorageSync('userId')
login(uid).then((res) => {
console.log(res)
}).catch(err => {
console.log(err)
})
}以上代碼就是完整的接口封裝了，真的超級實用，其實網(wǎng)上有很多關(guān)于uni-app接口封裝的案例，但是個人感覺親測了好幾種，這種是最好用的。分享在這里希望和大家一起交流。
總結(jié)
到此這篇關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的文章就介紹到這了,更多相關(guān)uni-app調(diào)取接口及封裝uni.request()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見)
這篇文章主要介紹了一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見)，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
當處理JavaScript字符串時,有許多有趣的技巧可以提高你的編碼效率,這篇文章將介紹一些有關(guān)JavaScript字符串的技巧,讓你在字符串操作方面更加嫻熟2023-10-10
關(guān)于JavaScript數(shù)組去重的一些理解匯總
這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組去重的一些理解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單網(wǎng)頁倒計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
最近需要遇到了這個問題點擊按鈕復制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實現(xiàn)得剪切板操作2012-11-11
這篇文章主要介紹了JS獲取數(shù)組最大值、最小值及長度的方法,涉及JavaScript遍歷數(shù)組及l(fā)ength屬性的相關(guān)使用技巧,非常簡潔實用,需要的朋友可以參考下2015-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)走馬燈式抽獎，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了JS判斷客服QQ號在線還是離線狀態(tài)的方法,可實現(xiàn)完整的判斷QQ在線及對話的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01
javascript游戲開發(fā)之《三國志曹操傳》零部件開發(fā)(二)人物行走的實現(xiàn)
上一講我們談到了如何讓靜態(tài)人物變?yōu)閯討B(tài)，今天我們來談?wù)勅绾问谷宋镆苿?，感興趣的朋友可以了解下哦，順便鞏固一下animate方法的應(yīng)用，希望本文對你有所幫助2013-01-01
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS，Android,H5,以及各種小程序（微信/支付寶/百度/頭條/?QQ?/釘釘）等多個平臺,這篇文章主要給大家介紹了關(guān)于使用uni-app打包H5的相關(guān)資料,需要的朋友可以參考下2022-11-11