详细介绍Uniapp中的请求和处理结果的相关知识

2023-05-05 17:58| 来源: 网络整理| 查看: 265

随着移动互联网的发展，移动应用程序的市场需求越来越大，针对该需求，诸如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中文网其它相关文章！

【本文地址】

公司简介

联系我们