一.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}

uni-app使用uview组件中的封装

一.http网络请求的概念

二.封装的必要性

三.使用uview组件中的封装

猜你喜欢