uni-app nutzt die Kapselung in der uview-Komponente

1. Das Konzept der HTTP-Netzwerkanforderung

1. HTTP ist ein Protokoll zur Datenübertragung, das die Grundlage von Webanwendungen bildet. HTTP-Anfragen werden im Allgemeinen verwendet, um Daten von einem Webserver abzurufen oder an ihn zu senden.

2. Front- und Back-End sind getrennt, und beide Enden verwenden http als Kommunikationsprotokoll. Natürlich gibt es auch andere Protokolle wie Websocket, aber http ist das wichtigste Protokoll für Front- und Back-End-Anwendungen.

3. Der Zugriff auf den Webserver erfolgt über einen Domänennamen oder eine IP-Adresse

4. Netzwerkanforderungen werden am häufigsten bei der Front-End- und Back-End-Trennungsentwicklung verwendet. Ajax-Technologie wird in Website-Anwendungen verwendet, und uni.request wird in der mobilen Entwicklung basierend auf Uniapp verwendet

2. Die Notwendigkeit der Kapselung

1. Extrahieren Sie öffentliche Logikcodes, legen Sie Funktionen, Objekte und Attribute durch Export offen und verwenden Sie diese offengelegten Funktionen, Objekte und Attribute durch Import, um den Code wiederverwendbar zu machen, die Wartbarkeit des Codes zu verbessern und die Wirkung einer einzigen Änderung und aller Änderungen zu erzielen

2. Eine Technik zum Organisieren von Code in kleinere, wiederverwendbarere Teile. Die Kapselung kann die Wartung und das Testen von Code erleichtern und die Wiederverwendung von Code erleichtern. Die Kapselung kann auch dazu beitragen, die Implementierungsdetails des Codes zu verbergen, wodurch der Code leichter verständlich und verwendet werden kann.

3. In JavaScript verwenden Sie Funktionen, um Code zu kapseln. Eine Funktion ist ein wiederverwendbarer Codeblock, der Eingaben entgegennimmt und Ausgaben zurückgibt. Indem Sie Code in Funktionen kapseln, können Sie ihn in kleinere, wiederverwendbarere Teile organisieren und diese in Funktionen verstecken. Dies erleichtert die Wartung und das Testen des Codes und kann die Wiederverwendung des Codes erleichtern.

4. u-view bietet HTTP-Anfrage-Plug-Ins, ähnlich wie Axios, siehe https://www.uviewui.com/is/http.html

. Versprechen Sie Unterstützung

. Unterstützung für Anfrage- und Antwort-Interceptoren

. Unterstützt das Hoch- und Herunterladen von Dateien

3. Verwenden Sie die Kapselung in der uview-Komponente

1. Die Informationen, die das Projekt konfigurieren muss, werden separat in config/inrdex.js abgelegt

// Der Basispfad der Anfrage
const baseURL = process.env.NODE_ENV === "development" ?
" http://192.168.1.188:8080 "http://192.168.1.7555:8080"://test Environment (Proxy-Pfad der Request-Schnittstelle)
"http://:8080";//Online-Umgebung

2. Kapseln Sie 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}