前言

最近群里的一個(gè)小明同學(xué)問(wèn) uniapp可以使用axios請(qǐng)求嗎？我當(dāng)時(shí)就一愣 反問(wèn)為什么要使用axios，是 uni.request 不香了嗎？

小明：因?yàn)閍xios可以像vue的項(xiàng)目一樣，在request里面封裝巴拉巴拉一堆。

我：那uni.request不也可以嗎

小明：可是我不知道 uni.request怎么封裝，可以講講然后我教教新來(lái)的是實(shí)習(xí)生嘛。

我：那你聽(tīng)仔細(xì)了，我只講這一次。

1.前期準(zhǔn)備

前期準(zhǔn)備新建一個(gè)uniapp項(xiàng)目，新增node小demo （新手自己看，老手直接跳到后面）

1-1 uniapp項(xiàng)目創(chuàng)建

首先我們先創(chuàng)建我們的uniapp項(xiàng)目

打開(kāi)我們的hbuilderX

文件/1.項(xiàng)目

 然后起名創(chuàng)建

我們的uniapp就創(chuàng)建好了。

1-2 node接口創(chuàng)建

然后在新建我們的接口

首先打開(kāi)我們的命令窗口

輸入命令 npm init  然后一直回車(chē)就可以了

 然后新建一個(gè)app.js的文件

 然后安裝我們的express

yarn add express

在app.js中寫(xiě)入在終端輸入node ./app.js 運(yùn)行

const express ?= require('express')
const app = express();
app.listen(3000, () => {
? ? console.log(`端口:localhost:3000/`)
})

這里可以看見(jiàn)項(xiàng)目成功運(yùn)行

然后在app.js中寫(xiě)入測(cè)試數(shù)據(jù)

app.get('/list', (req, res) => {
? ? res.send({
? ? ? ? "code": 0,
? ? ? ? "message": "登錄成功",
? ? ? ? "data": {
? ? ? ? ? ? "token":"vip"
? ? ? ? }
? ? })
})

然后重新運(yùn)行項(xiàng)目打開(kāi)瀏覽器輸入 http://localhost:3001/list

這樣就可以看見(jiàn)我們的測(cè)試數(shù)據(jù)了。到這里我們的后端模擬數(shù)據(jù)就可以了。項(xiàng)目保持運(yùn)行狀態(tài)。

2.uni.request封裝

首先我們先創(chuàng)建文件夾utils/request.js

2-1 url_all

在我們的request.js中首先自己定義一個(gè)叫 url_all

我們定義的url_all就是我們接口的地址

const url_all = {
	'DEV': 'http://localhost:3001', // 開(kāi)發(fā)
}

我這里這樣定義的原因是我們?cè)趯?shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中我們可能會(huì)有我們的本地地址，還會(huì)有我們的測(cè)試地址，還會(huì)有我們的線(xiàn)上地址，免得因?yàn)檫@個(gè)地址每次打包發(fā)布都需要改變這里的地址。我們這里可以給判斷，同學(xué)們可以自己思考一下該怎么做。如果有不懂的可以聯(lián)系我?guī)椭獯稹?/p>

接著往下。

然后定義一個(gè)baseurl獲取我們的接口地址到底的線(xiàn)上線(xiàn)下還是測(cè)試

這里直接寫(xiě)死

let BASEURL = url_all['DEV']

2-2 request

然后下面定義一個(gè)加request的函數(shù)并導(dǎo)出，有一個(gè)參數(shù)

export const request =(options={})=>{
}

這里我們需要將request這個(gè)函數(shù)的內(nèi)部進(jìn)行一個(gè)請(qǐng)求，然后將數(shù)據(jù)進(jìn)行導(dǎo)出 ，

這里問(wèn)題就來(lái)了，如果我們失敗的請(qǐng)求想要在外部獲取我們可以直接導(dǎo)出嗎?

那我們這里就可以考慮使用一個(gè)Promise來(lái)獲取成功與否的狀態(tài)，

這里直接return一個(gè)new的Promise

export const request =(options={})=>{
	return new Promise((resolve,rejects)=>{
        
	})
}

接下來(lái)里面就可以寫(xiě)我們的請(qǐng)求了。到這里為了代碼的簡(jiǎn)潔，我們可以將內(nèi)容部分抽離成一個(gè)函數(shù)

handleRequest然后將我們的參數(shù)options和狀態(tài)傳過(guò)去

export const request =(options={})=>{
	return new Promise((resolve,rejects)=>{
		handleRequest(options,resolve,rejects)
	})
}

2-3 handleRequest

首先定義好我們的handleRequest接收三個(gè)參數(shù)然后就可以直接發(fā)送請(qǐng)求

首先看看我們的uni.request

uni.request(OBJECT) | uni-app官網(wǎng)

我們直接進(jìn)行組合數(shù)據(jù)然后將我們的狀態(tài)return出去

// 發(fā)起請(qǐng)求
function handleRequest(options, resolve, reject) {
	uni.request({
		url: BASEURL + options.url,
		method: options.method,
		data: options.data,
		success: (response) => {
			return resolve(response.data)
		},
		fail: (fail) => {
			console.log('fail',fail)
			return reject(fail);
		}
	})
}

到這里我們的uni.request其實(shí)就已經(jīng)封裝好了，接下里我們來(lái)測(cè)試一下。

3 api新增

新增文件 api/user.js

import {request} from '@/utils/request.js';
export const users =(options)=>{
	return request({
		url:'/list',
		method:'GET',
		data:options
	})
}

然后找到我們的 pages/index/index.vue 引入測(cè)試

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>
 
<script>
	import {users} from '@/api/user.js'
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
		this.user()
		},
		methods: {
			async user(){
				console.log('觸發(fā)了')
				try{
						const res = await users()
						console.log('res',res)
				}catch(e){
					console.log('catch',e)
					//TODO handle the exception
				}
			
			}
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
 
	.text-area {
		display: flex;
		justify-content: center;
	}
 
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

然后就可以拿到數(shù)據(jù)

 4.結(jié)束

看到這里我們的封裝uni.request發(fā)送請(qǐng)求就已經(jīng)完成了，是不是跟axios發(fā)送請(qǐng)求沒(méi)有差別呢？

到此這篇關(guān)于uniapp封裝axios的文章就介紹到這了,更多相關(guān)uniapp封裝axios內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！