??隨著鴻蒙系統(tǒng)的興起,越來越多的app會(huì)采用鴻蒙開發(fā)。而鴻蒙開發(fā)必不可少的就是調(diào)用各種接口服務(wù)。為了簡化接口的調(diào)用流程,我們通常會(huì)做一層封裝。今天就來講解一下,如何用uni-app封裝鴻蒙的接口請求庫。
一、新建項(xiàng)目
??首先我們要新建一個(gè)鴻蒙項(xiàng)目啦！當(dāng)然選擇第一個(gè)空白項(xiàng)目就可以
二、目錄結(jié)構(gòu)
三、詳細(xì)介紹
1. 創(chuàng)建request請求方法
??首先在js目錄下創(chuàng)建一個(gè)ajax.js文件,這個(gè)文件用來封裝網(wǎng)絡(luò)請求:
// request.js
import config from './config.js';
export default function request(url, data = {}, method = 'GET') {
return new Promise((resolve, reject) => {
// 初始化請求任務(wù)
var requestTask = uni.request({
url: config.apiBaseUrl + url,
data: data,
method: method,
header: {
Authorization: 'Bearer ' + getToken()
},
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err)
}
});
// 中斷請求任務(wù)
requestTask.abort = (cb) => {
cb && cb();
requestTask.abort();
}
});
}
??這里我們封裝了一個(gè)request方法,調(diào)用時(shí)需要傳入接口url、請求數(shù)據(jù)、請求方法這3個(gè)參數(shù)。
??同時(shí)實(shí)現(xiàn)了中斷請求的功能,通過requestTask.abort可以中斷這次請求。
2. 接口登錄與token處理
??然后還需要實(shí)現(xiàn)token的自動(dòng)刷新,我們在ajax.js文件中添加:
// token處理
export function getToken() {
var token = uni.getStorageSync('token');
if (!token) {
return login().then(res => {
token = res.token;
uni.setStorageSync('token', token);
return token;
});
}
return token;
}
// 登錄業(yè)務(wù)方法
function login() {
var data = {
username: 'test',
password: '123456'
};
// 實(shí)際應(yīng)該調(diào)用登錄接口
return request('/login', data);
}
??這樣 before 請求發(fā)出時(shí),會(huì)先自動(dòng)處理token,如果沒有則調(diào)用登錄接口獲取。
3. 接口管理
??我們通常會(huì)把接口按照業(yè)務(wù)分類,放到單獨(dú)的接口管理文件中:
??在api目錄下創(chuàng)建user.js文件:
// user.js
import request from '../js/request.js';
export function getUserInfo(data) {
return request('/user/info', data, 'POST');
}
export function getProductList(data) {
return request('/products', data, 'GET');
}
??調(diào)用時(shí)只需要導(dǎo)入這個(gè)接口管理文件,就能非常方便地使用接口方法了:
// 頁面中使用
import {getUserInfo} from '../api/api.js';
getUserInfo({id: 123}).then(res => {
// TODO
});
- 配置管理
??最后我們通常還需要一個(gè)配置管理文件,在config.js中進(jìn)行統(tǒng)一管理:
// config.js
const CONFIG = {
apiBaseUrl: 'https://api.example.com',
statusCode: {
SUCCESS: 200,
FORBIDDEN: 403,
NOT_FOUND: 404
}
}
export default CONFIG;
其他文件中導(dǎo)入CONFIG對象即可使用這些配置項(xiàng)。
??到此,我們就實(shí)現(xiàn)了請求方法、接口管理、配置管理的封裝工具。這套簡單的接口請求庫也基本能滿足中小型的uni-app項(xiàng)目需求。文章來源：http://www.zghlxwxcb.cn/news/detail-788003.html
如果你有任何疑問,歡迎在評(píng)論區(qū)交流!文章來源地址http://www.zghlxwxcb.cn/news/detail-788003.html
到了這里，關(guān)于詳細(xì)教程 - 從零開發(fā) Vue 鴻蒙harmonyOS應(yīng)用 第五節(jié) （基于uni-app封裝鴻蒙接口請求庫）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
