前端封装api请求
前端封装 API 请求可以提高代码的可维护性和重用性，同时使得 API 调用更加简洁和易用。
下面是一种常见的前端封装 API 请求的方式：
-
创建一个 API 封装模块或类：可以使用 JavaScript 或 TypeScript 创建一个独立的模块或类来封装 API 请求。这个模块或类可以包含一些常用的方法，例如
get、post等，用于发送不同类型的请求。 -
配置基本信息：在封装模块中，设置 API 的基本信息，例如 API 的根地址、请求头等。可以定义一些默认配置，也可以允许开发者在调用时传入自定义配置。
-
实现请求方法：根据需要，实现不同的请求方法，例如
get、post、put、delete等。这些方法通常接收参数（例如 URL、数据、请求头等），并返回一个 Promise 对象，以便在异步请求完成后获取数据或处理错误。 -
处理请求和响应拦截：在请求发送前，可以对请求进行一些预处理，例如添加统一的请求头、身份验证等。在响应返回后，也可以对响应进行拦截和处理，例如判断状态码、处理错误信息等。
-
错误处理：在封装的 API 模块中，可以统一处理请求错误。例如，对于网络错误或服务器返回的错误信息，可以进行统一的处理，并根据需要进行提示或记录操作。
-
使用封装的 API 模块：在项目中使用封装的 API 模块进行 API 请求。通过调用封装模块中的方法，传入请求所需的参数，即可发送请求并获取响应数据。
这种方式的好处是，在项目中可以复用封装好的 API 请求逻辑，减少代码的冗余，并且使得 API 调用的代码更加清晰和易读。
此外，对于底层的网络请求库，也可以根据需要进行切换和替换，而不需要修改大量的业务代码。
更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。
uni-app 封装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请求，使代码结构更加清晰和可维护。记得根据实际情况进行适当的错误处理和数据处理。
uni-app封装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
- data 请求参数data
- 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);
});
