目录
- 1，封装API请求步骤
- 2，uni-app封装api请求改进
1，封装API请求步骤
在uni-app中封装API请求可以按照以下步骤进行：
-
创建一个utils文件夹，并在其中创建一个api.js文件，用于存放API请求相关的代码。
-
在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请求函数。根据具体的需求，你可以进行修改或添加其他的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请求函数。
通过以上步骤，你就可以在uni-app中封装API请求，使代码结构更加清晰和可维护。记得根据实际情况进行适当的错误处理和数据处理。
2，uni-app封装api请求改进
// @/utils/request.js
// #ifdef MP-WEIXIN
const baseURL = "https://www.bradenhan.tech"
// #endif
// #ifdef H5
const baseURL = ""
// #endifconst timeout = 5000// 封装api请求
const request = function(option){ // 获取用户传入的urlvar 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就显示loadingif(loading){uni.showLoading(loading)}// 返回一个promisereturn new Promise((resolve,reject)=>{ // 发起一个request请求uni.request({url, //请求urlmethod: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(){// 完成 关闭loadingif(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
• data 请求参数data
• needToken 是否需要参数
// @/api/index.jsimport 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);
});
