1. API リクエストのステップをカプセル化する
API リクエストをユニアプリでカプセル化するには、次の手順に従います。
-
utils フォルダーを作成し、その中に API リクエストに関連するコードを保存する api.js ファイルを作成します。
-
api.js ファイルに、リクエストを送信するための uni.request メソッドを導入します。サンプルコードは次のとおりです。
export function request(url, method, data) {
return new Promise((resolve, reject) => {
uni.request({
url: url,
method: method,
data: data,
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
}
});
});
}
ここでは Promise オブジェクトを使用して非同期リクエストを処理し、その後の使用と処理を容易にします。
- api.js ファイルで、特定の API リクエスト関数を定義します。サンプルコードは次のとおりです。
import { request } from './utils/api';
export function login(username, password) {
const url = 'https://api.example.com/login';
const method = 'POST';
const data = {
username: username,
password: password
};
return request(url, method, data);
}
export function getUserInfo(userId) {
const url = `https://api.example.com/users/${userId}`;
const method = 'GET';
return request(url, method);
}
上記サンプルコードには、ログインとユーザー情報取得のためのAPIリクエスト関数が2つ含まれています。特定のニーズに基づいて、他の API リクエスト関数を変更または追加できます。
- API を使用する必要があるページまたはコンポーネントに、定義された API リクエスト関数を導入して呼び出すだけです。サンプルコードは次のとおりです。
import { login, getUserInfo } from './utils/api';
login('example', 'password').then((res) => {
console.log('登录成功', res);
}).catch((err) => {
console.error('登录失败', err);
});
getUserInfo(123).then((res) => {
console.log('获取用户信息成功', res);
}).catch((err) => {
console.error('获取用户信息失败', err);
});
上記のサンプルコードは、カプセル化された API リクエスト関数を使用してログインし、ユーザー情報を取得する方法を示しています。特定のニーズに応じて、対応するページまたはコンポーネントで関連する API リクエスト関数を呼び出すことができます。
上記の手順により、API リクエストを uni-app にカプセル化し、コード構造をより明確で保守しやすくすることができます。実際の状況に応じて適切なエラー処理とデータ処理を実行することを忘れないでください。
2. ユニアプリのカプセル化 API リクエストの改善
// @/utils/request.js
// #ifdef MP-WEIXIN
const baseURL = "https://www.bradenhan.tech"
// #endif
// #ifdef H5
const baseURL = ""
// #endif
const timeout = 5000
// 封装api请求
const request = function(option){
// 获取用户传入的url
var url = baseURL + option.url;
// 添加提请求头
var header = option.header||{}
if(!!option.needToken){
// 添加token
header.Authorization = 'Bearer ' + uni.getStorageSync('token');
}
header.source=1;
header.channel="h5";
// 加载提示
var loading = option.loading;
// 如果有loading就显示loading
if(loading){
uni.showLoading(loading)
}
// 返回一个promise
return new Promise((resolve,reject)=>{
// 发起一个request请求
uni.request({
url, //请求url
method:option.method||"GET", //请求方法
header, //请求头
timeout,
data:option.data||option.params, //请求数据
success(res){
// 成功返回结果
if(res.statusCode===200){
resolve(res.data)
// 如果是101 没有权限
if(res.data.code==101){
uni.showToast({
title: res.data.msg,
icon:'none'
})
uni.redirectTo({
url: '/pages/login/index',
})
}
if(res.data.code!=200&&res.data.code!=0){
uni.showToast({
icon:'none',
title:res.data.msg||'请求错误'
})
}
}
},
fail(err){
// 失败返回失败结果
uni.showToast({
title: '请求失败',
icon:'error'
})
console.error(err);
reject(err)
},
complete(){
// 完成 关闭loading
if(loading){
uni.hideLoading()
}
}
})
})
}
// 定义get简洁方法
request.get=function(url,config){
return request({
url,
method:"GET",
...config
})
}
// 定义post简洁方法
request.post=function(url,data,config){
return request({
url,
method:"POST",
...config,
data
})
}
// 导出请求
export default request;
統合制御api.js
request.post(url,data,needToken)
パラメータ:
• URL リクエスト URL
• データリクエストパラメータデータ
• needToken にパラメータが必要かどうか
// @/api/index.js
import request from '@/utils/request.js'
// 用户注册
export function customUseRegister(data){
return request.post("/xxxx1",data)
}
// 微信用户登录
export function customUserLogin(data){
return request.post("/xxxx2",data)
}
// 更新用户信息 -- 需要使用Token
export function customUserUpdate(data){
return request.post("/xxxx3",data,{needToken: true})
}
コンポーネントで使用される
import { customUserLogin, customUseRegister,customUserUpdate } from '@/api/index.js'
customUserUpdate(data).then((res) => {
console.log('成功', res);
}).catch((err) => {
console.error('登录失败', err);
});