腳本之家服務器常用軟件

快捷導航

uniapp封裝axios的詳細過程(大可不必那么麻煩)

更新時間：2022年10月17日 15:44:31 作者：海海吶

在uniapp中使用axios進行請求時,uniapp無法使用axios的適配器,下面這篇文章主要給大家介紹了關于uniapp封裝axios的詳細過程,需要的朋友可以參考下

前言

最近群里的一個小明同學問 uniapp可以使用axios請求嗎？我當時就一愣反問為什么要使用axios，是 uni.request 不香了嗎？

小明：因為axios可以像vue的項目一樣，在request里面封裝巴拉巴拉一堆。

我：那uni.request不也可以嗎

小明：可是我不知道 uni.request怎么封裝，可以講講然后我教教新來的是實習生嘛。

我：那你聽仔細了，我只講這一次。

1.前期準備

前期準備新建一個uniapp項目，新增node小demo （新手自己看，老手直接跳到后面）

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

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

打開我們的hbuilderX

文件/1.項目

然后起名創(chuàng)建

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

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

然后在新建我們的接口

首先打開我們的命令窗口

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

然后新建一個app.js的文件

然后安裝我們的express

yarn add express

在app.js中寫入在終端輸入node ./app.js 運行

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

這里可以看見項目成功運行

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

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

然后重新運行項目打開瀏覽器輸入 http://localhost:3001/list

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

2.uni.request封裝

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

2-1 url_all

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

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

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

我這里這樣定義的原因是我們在實際項目開發(fā)過程中我們可能會有我們的本地地址，還會有我們的測試地址，還會有我們的線上地址，免得因為這個地址每次打包發(fā)布都需要改變這里的地址。我們這里可以給判斷，同學們可以自己思考一下該怎么做。如果有不懂的可以聯(lián)系我?guī)椭獯稹?/p>

接著往下。

然后定義一個baseurl獲取我們的接口地址到底的線上線下還是測試

這里直接寫死

let BASEURL = url_all['DEV']

2-2 request

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

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

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

這里問題就來了，如果我們失敗的請求想要在外部獲取我們可以直接導出嗎?

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

這里直接return一個new的Promise

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

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

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

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

2-3 handleRequest

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

首先看看我們的uni.request

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

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

// 發(fā)起請求
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其實就已經(jīng)封裝好了，接下里我們來測試一下。

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 引入測試

<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ù)