uni-app utilise l'encapsulation dans le composant uview

1. Le concept de demande de réseau http

1. HTTP est un protocole de transfert de données, qui est à la base des applications Web. Les requêtes HTTP sont généralement utilisées pour obtenir ou envoyer des données à un serveur Web.

2. Le front-end et le back-end sont séparés et http est utilisé comme protocole de communication aux deux extrémités.Bien sûr, il existe d'autres protocoles, tels que Websocket, mais http est le protocole le plus important pour les applications front-end et back-end.

3. Le serveur Web est accessible via un nom de domaine ou une adresse IP

4. Les requêtes réseau sont les plus fréquemment utilisées dans le développement de séparation front-end et back-end. La technologie Ajax est utilisée dans les applications de site Web et uni.request est utilisé dans le développement mobile basé sur uniapp.

2. La nécessité de l'encapsulation

1. Extrayez les codes de logique publique, exposez les fonctions, les objets et les attributs via l'exportation, et utilisez ces fonctions, objets et attributs exposés via l'importation pour rendre le code réutilisable, améliorer la maintenabilité du code et obtenir l'effet d'un changement et de tous les changements

2. Une technique pour organiser le code en morceaux plus petits et plus réutilisables. L'encapsulation peut rendre le code plus facile à maintenir et à tester, et il peut rendre le code plus facile à réutiliser. L'encapsulation peut également aider à masquer les détails d'implémentation du code, ce qui rend le code plus facile à comprendre et à utiliser.

3. En JavaScript, vous utilisez des fonctions pour encapsuler du code. Une fonction est un bloc de code réutilisable qui prend une entrée et renvoie une sortie. En encapsulant le code dans des fonctions, vous pouvez l'organiser en morceaux plus petits et plus réutilisables et les cacher à l'intérieur des fonctions. Cela rend le code plus facile à maintenir et à tester, et peut rendre le code plus facile à réutiliser.

4. u-view fournit des plug-ins de requête http, similaires à Axios, reportez-vous à https://www.uviewui.com/is/http.html

. Promesse de soutien

. Prise en charge des intercepteurs de requêtes et de réponses

. Téléchargement/téléchargement de fichier de support

3. Utilisez l'encapsulation dans le composant uview

1. Les informations que le projet doit configurer sont placées séparément dans config/inrdex.js

// Le chemin de base de la requête
const baseURL = process.env.NODE_ENV === "development" ?
" http://192.168.1.188:8080 "http://192.168.1.7555:8080"://test environment (proxy path of the request interface)
"http://:8080";//online environment

2. Encapsuler 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}