一、请求封装优点
-
代码重用性:通过封装请求,你可以在整个项目中重用相同的请求逻辑。这样一来,如果 API 发生变化或者需要进行优化,你只需在一个地方修改代码,而不是在每个使用这个请求的地方都进行修改。
-
可维护性:封装请求使代码更易维护。所有的请求逻辑都集中在一个地方,降低了维护成本。当需要添加新的功能、处理错误或者进行性能优化时,只需修改封装的请求逻辑而无需深入到每个组件或页面中。
-
错误处理:封装的请求可以统一处理错误,提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误,例如网络错误、权限问题等,使代码更加健壮。
-
统一配置:通过封装,可以在一个地方统一配置请求的一些参数,例如基本路径、请求超时时间、请求头等。这简化了全局配置的管理。
-
请求拦截器:使用请求拦截器可以在发送请求前进行一些操作,比如添加认证信息、加载 loading 状态等。这提高了代码的灵活性和可扩展性。
-
响应拦截器:响应拦截器可以在处理响应数据前进行一些操作,例如统一处理后端返回的错误码、格式化数据等。这样可以在前端层面统一处理后端的响应规范。
-
业务逻辑分离:通过封装请求,你可以将业务逻辑和数据获取逻辑分离开来。组件或页面只需关注业务逻辑,而不用关心具体的请求细节,使代码更加清晰。
二、之前代码的封装
const config_url= "";这里写你的域名
const request = (url, data = {}, method = 'GET') => {
return new Promise((resolve, reject) => {
uni.request({
url: config_url + url,
data: data,
method: method,
header: {
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": 'application/json',
},
dataType: 'json',
success: (res) => {
const responseData = interceptor(res.data);
if (responseData.code === 200 || responseData.code === 500 ||responseData
.code === 4025) {
resolve(responseData);
} else {
throwErr(res)
reject(res);
}
},
fail: function(err) {
reject(err)
}
})
});
};
// GET 请求封装
const get = (url, data) => {
return request(url, data, 'GET');
};
// POST 请求封装
const post = (url, data) => {
return request(url, data, 'POST');
};
// PUT 请求封装
const put = (url, data) => {
return request(url, data, 'PUT');
};
// DELETE 请求封装
const del = (url, data) => {
return request(url, data, 'DELETE');
};
// 请求拦截
function interceptor(response) {
if (response.code === -2) {
uni.showToast({
title: response.msg,
icon: 'none',
duration: 2000,
complete: () => {
uni.reLaunch({
url: '/pages/index/index',
});
},
});
return false;
}
return response;
}
// 处理错误
function throwErr(res) {
if (res.code == 500) {
uni.showToast({
title: res.msg,
})
}
}
export {
get,
post,
put,
del
}
1.main.js注册一下
import App from './App'
import uView from '@/node_modules/uview-ui'
import * as request from '@/api/request';
// import Lame from 'lamejs'
Vue.use(uView)
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import store from "./store/index.js"
Vue.config.productionTip = false
Vue.prototype.$store = store
//这里注册一下就好
Vue.prototype.$request = request;
App.mpType = 'app'
const app = new Vue({
store,
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import {
createSSRApp
} from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
2.使用请求
this.$request.post("/sz"这里是路径, {
这里写携带参数
}, ).then((res) => {
这里写成功之后的
}, (err) => {
这里处理失败之后的
})
总结:之前的比较拉不好用也可以用,api没写在一块
三、使用uview2.0的请求封装 (Http请求 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com))
1.前置条件
安装了uview组件库,才能操作下来的操作
2.首先建两个文件夹存放封装的请求和二次封装的api,代码会放在下面直接用就行
a. request.js
// 此vm参数为页面的实例,可以通过它引用vuex中的变量
module.exports = (vm) => {
// 初始化请求配置
uni.$u.http.setConfig((config) => {
/* config 为默认全局配置*/
config.baseURL = 'https://httpbin.org'; /* 根域名 */
return config
})
// 请求拦截
uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// 初始化请求拦截器时,会执行此方法,此时data为undefined,赋予默认{}
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
const data = response.data
return data === undefined ? {} : data
}, (response) => {
// 对响应错误做点什么 (statusCode !== 200)
return Promise.reject(response)
})
}
b. api.js
const http = uni.$u.http
// post请求,获取菜单
export const postMenu = (data) => http.post('/post', data)
c. main.js(把那个request.js引用一下)
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
})
require('@/pages/utils/request.js')(app)
app.$mount()
// #endif
d. 使用的话
postMenu({
usename: "lijiang",
password: "123"
}).then(res => {
console.log(res, res);
})
四、接口调试工具(Postman VS Apifox | Apifox 比 Postman 更适合中国开发者)
个人觉得挺好用的你先看下接口能用吗,前面找的接口不能用害我找了很长时间原因
五、接口找的这个博主的感谢get/post在线接口_在线接口请求-CSDN博客
代码直接可用完结,大佬勿喷,有什么问题可私信