Uniapp でのリクエストと処理結果に関する関連知識の詳細な紹介

モバイル インターネットの発展に伴い、モバイル アプリケーションの市場需要が増加しており、この需要に応えて、React Native や Flutter などのさまざまなクロスプラットフォーム フレームワークが登場しています。その中でも、Uniapp はクロスプラットフォーム アプリケーションの開発に使用できるフレームワークで、Android、iOS、Web、WeChat アプレット、Alipay アプレットなどの複数のプラットフォームを迅速に構築できます。

Uniapp では、リクエストの送信とリクエスト結果の処理がコア機能ですが、この記事では、Uniapp におけるリクエストとリクエスト結果の処理に関する関連知識を詳しく紹介します。

1. リクエストの送信

Uniapp でリクエストを送信するにはさまざまな方法がありますが、最も一般的な方法は uni.request メソッドを使用することです。

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

このコードでは、uni.request はリクエストを送信するためのメソッドです。URL、データ、ヘッダー、成功などのパラメータを含むオブジェクトを渡す必要があります。ここで、URL はリクエスト アドレスを表します。 data は要求されたデータを表し、header は要求ヘッダーを表します。success は要求が成功した後のコールバック関数を表します。リクエストのプロセス中に、fail パラメータと complete パラメータを渡すこともできます。これらのパラメータは、それぞれリクエストの失敗とリクエスト終了後のコールバック関数を表します。

リクエストを送信するもう 1 つの方法は、カプセル化された uni.request メソッドを使用し、それを別の JS ファイルにカプセル化することです。

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

このコードでは、req メソッドがカプセル化されており、url、メソッド、データの 3 つのパラメーターを渡し、Promise オブジェクトを返します。非同期操作は Promise オブジェクトを通じて実装され、成功した結果と失敗したリクエストは、解決メソッドと拒否メソッドに渡されます。同時に、get メソッドと post メソッドもカプセル化され、それぞれ get リクエストと post リクエストの送信を表します。使用方法は次のとおりです:

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. リクエスト結果の処理

Uniapp リクエスト結果は通常、以下に示すような JSON オブジェクトになります。

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

このうち、code はステータス コード、message はメッセージ、data はリクエスト結果データを表します。

リクエストの結果を処理するときは、まずコードに基づいてリクエストが成功したかどうかを判断し、さまざまなステータス コードに基づいてリクエストを処理する必要があります。リクエストメソッドの成功コールバック関数内、またはカプセル化されたメソッド内で処理できます。

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

リクエスト結果を処理するもう 1 つの方法は、インターセプターを使用することです。インターセプタは、リクエストの送信前またはリクエストの応答後に、トークンの追加やデータのフィルタリングなど、リクエストに対して何らかの処理を実行できる関数です。 Uniapp でインターセプターを使用する方法は、リクエスト インターセプターとレスポンス インターセプターをカプセル化して、それぞれリクエスト前ロジックとリクエスト後ロジックを処理することです。

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

このコードでは、requestInterceptors、responseInterceptors、リクエスト メソッドがカプセル化されており、その中にリクエスト インターセプターとレスポンス インターセプターがカプセル化されています。 requestInterceptors と responseInterceptors の機能は、それぞれリクエストの前後にリクエストを処理することです。 request メソッドはリクエストを送信するためのメソッドであり、使用方法は次のとおりです:

import request from './request';

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

最終的なプロダクト コードは最適化されたコードです:

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

この記事では、リクエストと処理に関する関連知識を紹介しますUniapp での結果。リクエストの送信とリクエスト結果の処理のさまざまな方法、リクエストの前後処理にインターセプターを使用する方法が含まれます。クロスプラットフォーム アプリケーション開発に Uniapp を使用する開発者にとって、この知識を習得することは、開発効率とコード品質を向上させ、アプリケーションの安定性とユーザー エクスペリエンスを向上させるのに役立ちます。

以上がUniapp でのリクエストと処理結果に関する関連知識の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。