首頁 web前端 uni-app 詳細介紹Uniapp中的請求和處理結果的相關知識

詳細介紹Uniapp中的請求和處理結果的相關知識

Apr 27, 2023 am 09:06 AM

隨著行動互聯網的發展,行動應用程式的市場需求越來越大,針對該需求,諸如React Native和Flutter等各種跨平台框架應運而生。其中Uniapp是一款可用於開發跨平台應用程式的框架,它能夠快速地建立多種平台,如Android、iOS、Web、微信小程式和支付寶小程式等。

在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、data、header、success等參數的對象,其中url表示請求地址,data表示請求的數據,header表示請求頭,success表示請求成功後的回呼函數。在請求過程中,也可以傳入fail和complete參數,分別表示請求失敗和請求結束後的回呼函數。

另一個發送請求的方式是使用封裝好的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、method、data三個參數,傳回一個Promise對象,透過Promise物件實現非同步操作,將請求成功和請求失敗的結果傳遞給resolve和reject方法。同時,也封裝了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表示請求結果資料。

在處理請求結果時,首先需要根據code判斷請求是否成功,並根據不同狀態碼進行對應處理。可以在請求方法的success回呼函數中處理,也可以在封裝的方法中處理。

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('请求失败');
    }
});
登入後複製

另一種處理請求結果的方式是使用攔截器。攔截器是一個函數,可以在請求發出前或請求回應後對請求做一些處理,例如添加token、過濾資料等等。在Uniapp中使用攔截器的方法是透過封裝一個request攔截器和response攔截器,分別處理請求前和請求後的邏輯。

//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和request方法,並將請求攔截器和回應攔截器封裝其中。其中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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)