Pengenalan terperinci kepada pengetahuan berkaitan permintaan dan hasil pemprosesan dalam Uniapp

Dengan pembangunan Internet mudah alih, permintaan pasaran untuk aplikasi mudah alih semakin meningkat Sebagai tindak balas kepada permintaan ini, pelbagai rangka kerja merentas platform seperti React Native dan Flutter telah muncul. Antaranya, Uniapp ialah rangka kerja yang boleh digunakan untuk membangunkan aplikasi merentas platform Ia boleh membina berbilang platform dengan cepat, seperti Android, iOS, Web, applet WeChat dan applet Alipay.

Dalam Uniapp, menghantar permintaan dan memproses hasil permintaan ialah fungsi teras Artikel ini akan memperkenalkan pengetahuan berkaitan permintaan dan hasil pemprosesan dalam Uniapp secara terperinci.

1. Menghantar permintaan

Terdapat banyak cara untuk menghantar permintaan dalam Uniapp, cara yang paling biasa ialah menggunakan kaedah uni.request.

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

Dalam kod ini, uni.request ialah kaedah menghantar permintaan Ia perlu menghantar dalam objek yang mengandungi parameter seperti url, data, pengepala, kejayaan, dsb., dengan url mewakili alamat permintaan. , data mewakili data yang diminta, dan pengepala Mewakili pengepala permintaan, dan kejayaan mewakili fungsi panggil balik selepas permintaan itu berjaya. Semasa proses permintaan, anda juga boleh memasukkan parameter gagal dan lengkap, yang masing-masing mewakili kegagalan permintaan dan fungsi panggil balik selepas permintaan tamat.

Cara lain untuk menghantar permintaan ialah menggunakan kaedah uni.request yang dirangkumkan dan merangkumnya ke dalam fail JS yang berasingan.

//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);
}

Dalam kod ini, kaedah req dirangkumkan, menghantar dalam tiga parameter: url, kaedah dan data, dan mengembalikan objek Promise dilaksanakan melalui objek Promise, dan hasil kejayaan dan permintaan yang gagal diluluskan untuk menyelesaikan dan menolak kaedah. Pada masa yang sama, kaedah dapatkan dan pos juga dirangkumkan, yang masing-masing mewakili penghantaran permintaan dan kiriman adalah seperti berikut:

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 Pemprosesan keputusan permintaan >Uniapp Hasil permintaan biasanya objek JSON, seperti yang ditunjukkan di bawah:

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

Antaranya, kod mewakili kod status, mesej mewakili mesej dan data mewakili data hasil permintaan.

Apabila memproses hasil permintaan, anda perlu terlebih dahulu menentukan sama ada permintaan itu berjaya berdasarkan kod dan mengendalikannya dengan sewajarnya berdasarkan kod status yang berbeza. Ia boleh diproses dalam fungsi panggil balik kejayaan kaedah permintaan atau dalam kaedah terkapsul.

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('请求失败');
    }
});

Cara lain untuk mengendalikan hasil permintaan ialah menggunakan pemintas. Pemintas ialah fungsi yang boleh melakukan beberapa pemprosesan pada permintaan sebelum permintaan dikeluarkan atau selepas respons permintaan, seperti menambah token, menapis data, dsb. Cara untuk menggunakan pemintas dalam Uniapp adalah untuk merangkum pemintas permintaan dan pemintas tindak balas untuk mengendalikan logik pra-permintaan dan pasca-permintaan masing-masing.

//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';
}

Dalam kod ini, requestInterceptors, responseInterceptors dan kaedah permintaan dirangkumkan, dan pemintas permintaan dan pemintas tindak balas terkandung di dalamnya. Fungsi requestInterceptors dan responseInterceptors adalah untuk memproses permintaan masing-masing sebelum dan selepas permintaan. Kaedah permintaan ialah kaedah untuk menghantar permintaan Kaedah penggunaan adalah seperti berikut:

import request from './request';

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

Kod produk akhir ialah kod yang dioptimumkan:

//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);
});

Artikel ini memperkenalkan pengetahuan berkaitan permintaan dan pemprosesan. keputusan dalam Uniapp Termasuk cara yang berbeza untuk menghantar permintaan dan memproses hasil permintaan, serta menggunakan pemintas untuk pra dan pasca pemprosesan permintaan. Bagi pembangun yang menggunakan Uniapp untuk pembangunan aplikasi merentas platform, menguasai pengetahuan ini akan membantu meningkatkan kecekapan pembangunan dan kualiti kod, serta meningkatkan kestabilan aplikasi dan pengalaman pengguna.

Atas ialah kandungan terperinci Pengenalan terperinci kepada pengetahuan berkaitan permintaan dan hasil pemprosesan dalam Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!