欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uni-app調(diào)取接口的3種方式以及封裝uni.request()詳解

 更新時(shí)間：2022年08月06日 14:21:18   作者：imtool  
我們?cè)趯?shí)際工作中要將數(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將返回一個(gè)數(shù)組[error,{NativeData}]
	//NativeData：調(diào)取接口后返回的原生數(shù)據(jù)
	if(res.statusCode === 200){
		this.carouselData = res.data
	}
	if(res.statusCode === 404){
		console.log('請(qǐng)求的接口沒有找到');
	}
})

3、async/await

async：用在函數(shù)定義的前面
async request(){    //函數(shù)體;}
await：用在標(biāo)明了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)建一個(gè)對(duì)象，將該對(duì)象掛在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('請(qǐng)求的接口沒有找到');
						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、進(jìn)入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ò)請(qǐng)求方法

uni.request({
    url: 'https://www.example.com/request', //僅為示例，并非真實(shí)接口地址。
    data: {
        name: 'name',
        age: 18
    },
    header: {
        'custom-header': 'hello' //自定義請(qǐng)求頭信息
    },
    success: function (res) {
        console.log(res.data);
    }
});

uniapp網(wǎng)絡(luò)請(qǐng)求的get和post

  • 對(duì)于 GET 方法，會(huì)將數(shù)據(jù)轉(zhuǎn)換為 query string。例如 { name: ‘name’, age: 18 } 轉(zhuǎn)換后的結(jié)果是 name=name&age=18。
  • 對(duì)于 POST 方法且 header[‘content-type’] 為 application/json 的數(shù)據(jù)，會(huì)進(jìn)行 JSON 序列化。
  • 對(duì)于 POST 方法且 header[‘content-type’] 為 application/x-www-form-urlencoded 的數(shù)據(jù)，會(huì)將數(shù)據(jù)轉(zhuǎn)換為 query string。

請(qǐng)求的 header 中 content-type 默認(rèn)為 application/json

注意 post請(qǐng)求必須加header[‘content-type’]

uni-app 封裝接口request請(qǐng)求

我們知道一個(gè)項(xiàng)目中對(duì)于前期架構(gòu)的搭建工作對(duì)于后期的制作有多么重要，所以不管做什么項(xiàng)目我們拿到需求后一定要認(rèn)真的分析一下，要和產(chǎn)品以及后臺(tái)溝通好，其中尤為重要的一個(gè)環(huán)節(jié)莫過于封裝接口請(qǐng)求了。因?yàn)榍捌诜庋b好了，后面我們真的可以實(shí)現(xiàn)粘貼復(fù)制了。所以今天給大家分享一個(gè)在uni-app中如何封裝一個(gè)request請(qǐng)求。

第一步、根目錄下新建 config.js 文件

const config = {
base_url: '這里可以是生產(chǎn)環(huán)境或者測(cè)試環(huán)境'
}
export { config }

這里主要配置接口的基本路徑

第二步、根目錄下新建 utils/http.js 文件

import {
	config
} from '../config.js'
 
export const apiResquest = (prams) => { //prams 為我們需要調(diào)用的接口API的參數(shù) 下面會(huì)貼具體代碼
 
	// 判斷請(qǐng)求類型
	let headerData = {
		'content-type': 'application/json'
	}
 
	let dataObj = null
        //因?yàn)槲覀兊腉ET和POST請(qǐng)求結(jié)構(gòu)不同這里我們做處理，大家根據(jù)自己后臺(tái)接口所需結(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; //請(qǐng)求的網(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ù)自己的實(shí)際情況調(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('請(qǐng)求完成')
				uni.hideLoading()
			}
		});
	})
}

第三步、 創(chuàng)建model 層 根目錄下新建 models/index.js 文件

——-??注意： 這里可以根據(jù)自己的項(xiàng)目功能需求分解models 層——-

import { apiResquest } from '../utils/http.js'
 
//POST 請(qǐng)求案例
 
export const login = (query) => {
	return apiResquest({
		url: '這里是API的地址',
		method: 'POST',
		query: {...query}
	})
}
 
//GET 請(qǐng)求案例可以傳遞參數(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)
	})
}

以上代碼就是完整的接口封裝了，真的超級(jí)實(shí)用，其實(shí)網(wǎng)上有很多關(guān)于uni-app接口封裝的案例，但是個(gè)人感覺親測(cè)了好幾種，這種是最好用的。分享在這里希望和大家一起交流。

總結(jié)

到此這篇關(guān)于uni-app調(diào)取接口的3種方式以及封裝uni.request()的文章就介紹到這了,更多相關(guān)uni-app調(diào)取接口及封裝uni.request()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • js瀏覽器本地存儲(chǔ)store.js介紹及應(yīng)用

    js瀏覽器本地存儲(chǔ)store.js介紹及應(yīng)用

    store.js 是一個(gè)兼容所有瀏覽器的 LocalStorage 包裝器，不需要借助 Cookie 或者 Flash。store.js 即可實(shí)現(xiàn)本地存儲(chǔ)功能
    2014-05-05
  • javascript鍵盤上下鍵的操作(選擇)

    javascript鍵盤上下鍵的操作(選擇)

    不錯(cuò)的使用鍵盤上下鍵實(shí)現(xiàn)選擇的代碼，方便用戶操作
    2008-06-06
  • js時(shí)間戳格式化成日期格式的多種方法介紹

    js時(shí)間戳格式化成日期格式的多種方法介紹

    本篇文章主要介紹了js時(shí)間戳格式化成日期格式的多種方法介紹的資料,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。
    2017-02-02
  • 詳解RequireJs官方使用教程

    詳解RequireJs官方使用教程

    RequireJS以一個(gè)相對(duì)于baseUrl的地址來加載所有的代碼。接下來通過本文給大家分享RequireJs官方使用教程，感興趣的朋友一起看看吧
    2017-10-10
  • JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法

    JavaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法

    下面小編就為大家?guī)硪黄狫avaScript 判斷一個(gè)對(duì)象{}是否為空對(duì)象的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比

    javascript 三種數(shù)組復(fù)制方法的性能對(duì)比,對(duì)于webkit, 使用concat; 其他瀏覽器, 使用slice.
    2010-01-01
  • JavaScript 開發(fā)中規(guī)范性的一點(diǎn)感想

    JavaScript 開發(fā)中規(guī)范性的一點(diǎn)感想

    在開發(fā)中通用的幾個(gè)方法，我們把它們放到utility目錄下或者utility.js中；所有的提示信息和報(bào)錯(cuò)信息統(tǒng)一放置在一起?？雌饋矶际切⌒〉膸撞剑瑓s能讓咱們開發(fā)的代碼同事讀起來更順暢，下個(gè)項(xiàng)目中也能用上。
    2009-06-06
  • 詳解JavaScript 的執(zhí)行機(jī)制

    詳解JavaScript 的執(zhí)行機(jī)制

    這篇文章主要介紹了JavaScript 的執(zhí)行機(jī)制，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
    2020-09-09
  • json對(duì)象和formData相互轉(zhuǎn)換的方式詳解

    json對(duì)象和formData相互轉(zhuǎn)換的方式詳解

    我們有兩種常見的傳參方式： JSON 對(duì)象格式和 formData 格式，但是一些場(chǎng)景是需要我們對(duì)這兩種數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換的，這篇文章主要介紹了json對(duì)象和formData相互轉(zhuǎn)換的方式詳解,需要的朋友可以參考下
    2023-02-02
  • ECharts入門教程

    ECharts入門教程

    ECharts 是一個(gè)使用JavaScript實(shí)現(xiàn)的開源可視化庫，涵蓋各行業(yè)圖表，滿足各種需求。這篇文章介紹了ECharts的基礎(chǔ)知識(shí)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06

最新評(píng)論