Introduction détaillée à la connaissance pertinente des demandes et des résultats du traitement dans Uniapp

Avec le développement de l'Internet mobile, la demande du marché pour les applications mobiles augmente. En réponse à cette demande, divers frameworks multiplateformes tels que React Native et Flutter ont vu le jour. Parmi eux, Uniapp est un framework qui peut être utilisé pour développer des applications multiplateformes. Il peut rapidement créer plusieurs plates-formes, telles que les applets Android, iOS, Web, WeChat et Alipay.

Dans Uniapp, l'envoi de demandes et le traitement des résultats des demandes sont une fonction essentielle. Cet article présentera en détail les connaissances pertinentes sur les demandes et le traitement des résultats dans Uniapp.

1. Envoi de requêtes

Il existe de nombreuses façons d'envoyer des requêtes dans Uniapp, la manière la plus courante est d'utiliser uni.request méthode.

uni.request({
    url: 'http://www.example.com',
    data: {
        name: 'example'
    },
    header: {
        'content-type': 'application/json'
    },
    success: function (res) {
        console.log(res.data)
    }
});

Dans ce code, uni.request est la méthode d'envoi d'une requête. Vous devez transmettre un objet contenant des paramètres tels que l'url, les données, l'en-tête, le succès, etc., où l'url représente le. L'adresse et les données de la demande représentent les données demandées, l'en-tête représente l'en-tête de la demande et le succès représente la fonction de rappel une fois la demande réussie. Pendant le processus de requête, vous pouvez également transmettre les paramètres fail et complete, qui représentent respectivement l'échec de la requête et la fonction de rappel une fois la requête terminée.

Une autre façon d'envoyer une requête consiste à utiliser la méthode uni.request encapsulée et à l'encapsuler dans un fichier JS séparé.

//request.js
import { getBaseUrl } from './config';

const req = (url, method, data) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: getBaseUrl() + url,
            method,
            data,
            header: {
                'content-type': 'application/json'
            },
            success: (res) => {
                resolve(res)
            },
            fail: (err) => {
                reject(err);
            }
        });
    });
}

export const post = (url, data) => {
    return req(url, 'POST', data);
}

export const get = (url, data) => {
    return req(url, 'GET', data);
}

Dans ce code, une méthode req est encapsulée, transmettant les trois paramètres d'url, de méthode et de données, et renvoyant un objet Promise. Les opérations asynchrones sont implémentées via l'objet Promise, et les résultats. des demandes réussies et échouées sont transmises aux méthodes de résolution et de rejet. Dans le même temps, les méthodes get et post sont également encapsulées, qui représentent respectivement l'envoi des requêtes get et post. L'utilisation est la suivante :

import { get, post } from './request';

get('/user', {id: 1}).then(res => {
    console.log(res.data);
});

post('/login', {username: 'example', password: 'example'}).then(res => {
    console.log(res.data);
});

2. 🎜## 🎜🎜#Le résultat de la requête dans Uniapp est généralement un objet JSON, comme indiqué ci-dessous :

{
    "code": 200,
    "message": "success",
    "data": {
        "username": "example",
        "age": 18
    }
}

Parmi eux, le code représente le code d'état, le message représente le message et les données représente les données du résultat de la demande.

Lors du traitement du résultat de la demande, vous devez d'abord déterminer si la demande réussit en fonction du code et la gérer en conséquence en fonction de différents codes d'état. Il peut être traité dans la fonction de rappel de réussite de la méthode de requête ou dans la méthode encapsulée.

import { get } from './request';

get('/user', {id: 1}).then(res => {
    if(res.code === 200) {
        console.log(res.data);
    } else if(res.code === 401) {
        console.log('用户未登录');
    } else if(res.code === 404) {
        console.log('用户不存在');
    } else {
        console.log('请求失败');
    }
});

Une autre façon de gérer les résultats d'une requête est d'utiliser un intercepteur. Un intercepteur est une fonction qui peut effectuer un certain traitement sur la requête avant l'envoi de la requête ou après la réponse à la requête, comme l'ajout de jetons, le filtrage des données, etc. La façon d'utiliser les intercepteurs dans Uniapp consiste à encapsuler un intercepteur de requête et un intercepteur de réponse pour gérer respectivement la logique pré-demande et post-demande.

//request.js
import { getBaseUrl } from './config';

const requestInterceptors = (config) => {
    //添加token或其他逻辑
    return config;
}

const responseInterceptors = (response) => {
    const res = response.data;
    if(res.code === 200) {
        return res.data;
    } else {
        //根据code进行错误处理
        uni.showToast({
            title: res.message,
            icon: 'none'
        });
        return Promise.reject(res);
    }
}

const request = (options) => {
    const { url, method = 'GET', data } = options;
    const config = {
        url: getBaseUrl() + url,
        method,
        data,
        header: {
            'content-type': 'application/json'
        }
    }

    return new Promise((resolve, reject) => {
        uni.request({
            ...requestInterceptors(config),
            success: (response) => {
                if(response.statusCode == 200) {
                    resolve(responseInterceptors(response));
                } else {
                    reject(response)
                }
            },
            fail: (error) => {
                reject(error);
            }
        });
    })
}

export default request;

//config.js
export const getBaseUrl = () => {
    //返回请求地址
    return 'http://www.example.com';
}

Dans ce code, les requestInterceptors, les responseInterceptors et les méthodes de requête sont encapsulés, et l'intercepteur de requête et l'intercepteur de réponse y sont encapsulés. La fonction de requestInterceptors et de ResponseInterceptors est de traiter la demande respectivement avant et après la demande. La méthode de requête est une méthode d'envoi de requêtes. La méthode d'utilisation est la suivante :

import request from './request';

request({
    url: '/user',
    method: 'get',
    data: {id: 1}
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});

Le code produit final est le code optimisé :

//config.js
export const getBaseUrl = () => {
    //返回请求地址
    return 'http://www.example.com';
}

//request.js
import { getBaseUrl } from './config';

const requestInterceptors = (config) => {
    //添加token或其他逻辑
    return config;
}

const responseInterceptors = (response) => {
    const res = response.data;
    if(res.code === 200) {
        return res.data;
    } else {
        //根据code进行错误处理
        uni.showToast({
            title: res.message,
            icon: 'none'
        });
        return Promise.reject(res);
    }
}

const request = (options) => {
    const { url, method = 'GET', data } = options;
    const config = {
        url: getBaseUrl() + url,
        method,
        data,
        header: {
            'content-type': 'application/json'
        }
    }

    return new Promise((resolve, reject) => {
        uni.request({
            ...requestInterceptors(config),
            success: (response) => {
                if(response.statusCode == 200) {
                    resolve(responseInterceptors(response));
                } else {
                    reject(response)
                }
            },
            fail: (error) => {
                reject(error);
            }
        });
    })
}

export default request;

//api.js
import request from './request';

export const getUser = (id) => {
    return request({
        url: '/user',
        method: 'get',
        data: {id}
    });
}

//页面中使用
import { getUser } from './api';

getUser(1).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});

Cet article présente la requête et traitement des résultats dans Uniapp Connaissances pertinentes, y compris les différentes manières d'envoyer des demandes et de traiter les résultats des demandes, ainsi que l'utilisation d'intercepteurs pour le pré- et post-traitement des demandes. Pour les développeurs qui utilisent Uniapp pour le développement d'applications multiplateformes, la maîtrise de ces connaissances contribuera à améliorer l'efficacité du développement et la qualité du code, ainsi qu'à améliorer la stabilité des applications et l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!