uni-app使用uview组件中的封装
一.http网络请求的概念
HTTP是一种用于传输数据的协议，它是Web应用程序的基础。HTTP请求通常用于从Web服务器获取数据或将数据发送到Web服务器。
前后端分离，使用http作为两端的通讯协议，当然还可以有其他协议，例如Websocket，但http是前后端应用的最主要的协议
web服务器是通过域名或IP地址访问
网络请求是前后端分离开发中用得最为频繁的，在网站应用使用的是ajax技术，基于uniapp的移动端开发使用的是uni.request
二.封装的必要性
抽取公共逻辑代码，通过export对外公开函数、对象、属性，通过import来使用这些公开的函数、对象、属性，让代码具有复用性，从提高了代码的可维护性，做到一改全改的效果
将代码组织成更小、更可重用的部分的技术。封装可以使代码更易于维护和测试，并且可以使代码更易于重用。封装还可以帮助隐藏代码的实现细节，从而使代码更易于理解和使用。
在JavaScript中，您可以使用函数来封装代码。函数是一种可重用的代码块，它接受输入并返回输出。通过将代码封装在函数中，您可以将其组织成更小、更可重用的部分，并将其隐藏在函数的内部。这使得代码更易于维护和测试，并且可以使代码更易于重用。
4.u-view提供了http的请求插件，类似Axios，参考 https://www.uviewui.com/is/http.html
。支持Promise
。支持请求和响应拦截器
。支持文件上传/下载
三.使用uview组件中的封装
1.项目需要配置的信息，单独放在 config/inrdex.js
// 请求的基本路径
const baseURL = process.env.NODE_ENV === "development" ?
" http://192.168.1.188:8080"http://192.168.1.7555:8080"://测试环境(请求接口的代理路径)
"http://:8080";//上线环境
2.封装http
import {baseURL} from "@/config/index.js"// 引入基路径
const http = uni.$u.http//uview的http插件对象
// 初始化请求配置
http.setConfig((config) => {
config.baseURL = baseURL //API的请求地址，基路径
config.header = {//设置请求头类型，这里是form类型，要看接口文档才能确定是什么类型
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
}
return config//返回上面配置好的信息
})
// 请求拦截
http.interceptors.request.use((config) => { // 可使用async await 做异步操作
// let strUser = uni.getStorageSync("user")//"user"是登入成功后存储的用户信息，存储为了字符串
// let objUser = strUser ? JSON.parse(strUser) : {}//判断存不存在user，转为对象形式，否则{}，{}是为了防止空指针
// console.log(objUser,"objUser");
config.header.accessToken = uni.getStorageSync("token")//获取token值
return config
}, config => { // 可使用async await 做异步操作
return Promise.reject(config)
})
// 响应拦截
http.interceptors.response.use((response) => {
/* 对响应成功做点什么 可使用async await 做异步操作*/
let data = response.data//这里做浅解，可以做也可以不做，做了以后请求数据后赋值就少写一个data
const {errmsg,errno} = data;
if (200 !== errno) {
return Promise.reject(data); //返回错误，通过catch来处理错误
}else if(10001 == errno){
uni.navigateTo({
url:'/pages/public/login'
})
}
return data
}, (response) => {
// 对响应错误做点什么 （statusCode !== 200）
return Promise.reject(response)
})
/**
* 封装post请求
* _gp 接口的_gp参数
* _mt 接口的_mt参数
* data 接口传递的数据
* params 查询参数
*/
function post(_gp, _mt, data = {}, params = {}) {
return http.post("/m.api", {//post的第三个参数才为配置项
_gp,
_mt,
...data
},{
...params
})
}
/**
* 封装get请求
* _gp 接口的_gp参数
* _mt 接口的_mt参数
* params 查询参数
*/
function get(_gp, _mt, params={}) {
return http.post("/m.api", {
_gp,
_mt,
...params
})
}
export {post,get}