万能前端框架uni app初探04:发送http请求

前言

本节我们使用uni app的http请求功能，使用flask搭建一个测试用本地服务器，点击按钮获取服务器返回信息，并显示出来。

一、基础知识

1. HTTP基本知识

(1) HTTP概要

HTTP是Hypertext Transfer Protocol的缩写，Hypertext(超文本)是可以根据客户端请求而跳转的结构化信息。HTTP协议的请求及相应方式设计如下图所示：

从图中可以看出，服务器端响应客户端请求后立刻断开连接，连接不会维持很久，即使同一个客户端再次发送请求，服务端也无法辨认出是否是原先的那个客户端发出的请求，会以相同的方式处理新的请求。

(2) HTTP请求

HTTP请求是客户端向服务端发送请求消息，请求消息可以分为请求行、消息头、消息体三个部分；请求行含有请求方式信息(GET/POST等)，GET用于请求数据，POST主要用于传输数据；消息头包括一些访问的域名、用户代理、Cookie等信息；消息体就是请求的数据，仅在POST方式请求时候输入。

(3) HTTP响应

HTTP响应是指服务端根据客户端发送的请求中的动作要求做出具体的动作，然后将结果返回给客户端。 HTTP响应消息可以分为状态行、头信息、消息体三个部分；状态行含有请求的状态信息，这是其与请求消息相比最大的区别。

2. uni.request

在uni-app中，使用uni.request()函数既可以发出http请求，接口说明如下

uni.request(OBJECT)

发起网络请求

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

常用参数如下：

method 有效值

必须大写，有效值在不同平台差异说明不同。

官方示例：

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
 'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
 console.log(res.data);
 this.text = 'request success';
    }
}); 

3. 本地服务器

(1) flask简介

Flask 是一个微型的 Python 开发的 Web 框架，基于Werkzeug WSGI工具箱和Jinja2 模板引擎。 Flask使用BSD授权。 Flask也被称为“microframework”，因为它使用简单的核心，用extension增加其他功能。Flask没有默认使用的数据库、窗体验证工具。然而，Flask保留了扩增的弹性，可以用Flask-extension加入这些功能：ORM、窗体验证工具、文件上传、各种开放式身份验证技术。

(2) 环境搭建

安装python环境

pip install Flask

pip install flask_cors 

(3) 本文测试代码

ffrom flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def hello_world():
 return 'Hello, World!'

@app.route('/hello')
def hello():
 return 'Hello!'

@app.route('/request')
def request():
 return "request!"

if __name__ == '__main__':
   app.run(host="192.168.1.8", port=5000) 

文件结构如下：

(3) 运行

进入到根目录，输入python run.py即可运行。

注意：浏览器访问需要解决跨域问题，安装flask_cors后，增加如下函数

CORS(app, supports_credentials=True) 

浏览器输入：?http://192.168.1.8:5000/request?,运行结果如下：

浏览器输入：?http://192.168.1.8:5000/?hello,运行结果如下：

二、示例

将上一讲app03工程复制为app004,然后拖到HBuilder X中。

1.示例代码

修改pages/index/index.vue中代码如下

<template>
 <view class="container">
 <view class="view_show">
 {{text}}
 </view>
 <button class="btn_view" type="primary" @click='btn_clicked'>中英文切换</button>
 </view>
</template>
<script>
    export default {
        data() {
            return {
                flag: 0,
                text: 'hello world',
            }
        },
        methods: {
            btn_clicked() {
                if (0 == this.flag)
                {
                    this.flag = 1
                    // http 
                    uni.request({
                        url: 'http://192.168.1.8:5000/request', 
                        method:"GET",
                        success: (res) => {
                            console.log(res.data);
                            this.text = res.data
                            uni.showToast({
                                title:"lhost success"
                            })
                        },
                        fail: (res) => {
                            console.log("error…….");
                            uni.showToast({
                                title:"lhost fail",
                            })
                            this.text = 'request localhost fail'
                        }
                    });
                }else
                {
                    this.flag = 0
                    // http 
                    uni.request({
                        url: 'http://192.168.1.8:5000/hello', 
                        success: (res) => {
                            console.log("request baidu success", res.data);
                            this.text = res.data;
                            uni.showToast({
                                title:"baidu success",
                            })
                        },
                        fail: (res) => {
                            console.log("request baidu fail")
                            this.text = "request baidu fail"
                        }
                    });
                }
            },
        }
    }
</script>
<style>
    .container {
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
    }
.view_show {
  margin: 15px auto;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}
.btn_view {
  margin: 15px auto;
  width: 250px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
}
</style> 

上述代码是在上一节代码基础上增加了点击按钮调用uni.request()功能，核心功能代码如下:

uni.request({
    url: 'http://192.168.1.8:5000/request', 
    method:"GET",
    success: (res) => {
 console.log(res.data);
 this.text = res.data
        uni.showToast({
            title:"lhost success"
        })
    },
    fail: (res) => {
 console.log("error…….");
        uni.showToast({
            title:"lhost fail",
        })
 this.text = 'request localhost fail'
    }
}); 

其中url为本地服务器的访问地址，method为请求方式，默认GET，uni.showToast()函数可以弹出提示框。

三、运行

点击运行--->运行到浏览器--->Chome

web端显示如下

Android具体运行过程不在描述，如有疑问，请看第一节，安装后界面如下：

至此我们已经实现，点击按钮，发出http GET请求，访问本地服务器，并将获取的数据实时显示在页面上。