从编程小白到全栈开发:服务的调用

忙带懒,好久没有更新文章了(其实主要是想留给你们一些消化前面文章知识点的时间,哈哈哈?)。

我们在前文 《从编程小白到全栈开发:基于框架开发服务端》中,初步学习了如何使用Node.js服务端框架Express来编写后端服务,并基于Express,对我们先前的简易计算器程序的代码进行了一次重构。如果你是个初学者的话,相信通过阅读和实践前面的几篇文章,你已经能开始自己写一些代码了,并能对一个程序的各个组成部分建立起更加清晰直观的认识,知道什么是客户端,什么是服务端。

今天,在这个基础上,我想拓展一下你们对于客户端的理解。如果我没猜错的话,应该很多人都会把网页,移动app,桌面程序等用户直接可以操作的部分,当做客户端。从一个程序的用户角度来说,这种说法是没错的。不过,从程序本身来说的话,客户端的定义就会广泛许多,来看下图:

在该图示意的系统中,我们有多个后端服务(在一个实际的软件系统中,这个是非常常见的),这些后端服务之间也会互相的进行调用;后端服务也会调用其他第三方提供的服务。这种情况下,我们会把提供服务的叫做服务端,调用服务的叫做客户端。因此,该图中的界面UI后端服务1后端服务2在其有限的范围内,都可以被称作客户端:界面UI后端服务1后端服务2的客户端;后端服务1后端服务2第三方服务1的客户端,以此类推。

客户端调用服务端的时候,需要遵循事先的约定,也就是我们常说的协议。到目前为止,我们开发的服务都是基于HTTP协议,所以在客户端我们也都需要使用HTTP协议来发起调用。

在浏览器中调用HTTP服务

在浏览器中,我们通常可以通过<form>表单或XMLHttpRequest的来调用服务端的HTTP服务。

使用<form>

我们先来看一下使用<form>,如何来调用我们之前写的计算器后端服务/calc

在我们的html代码会像是这样:

<form class="calculator" action="/calc" method="GET">
    <input type="text" id="num1" name="num1">

    <select id="operator" name="operator">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" id="num2" name="num2">

    <button type="submit">计算</button>
</form>

在这个表单中,<form>标签上的action属性设置为目标调用的服务路径,method设置为调用所使用的HTTP方法。然后在<form>表单下的<input><select>都需要设置上name属性,它们会被用做调用服务的参数名,传递到服务端。

使用XMLHttpRequest

使用XMLHttpRequest调用的方式,也就是我们耳熟能详的AJAX,其实在我们之前的计算器示例代码中就已经使用了:

function calc() {
    // 获取id为num1的输入框
    var num1El = document.getElementById('num1');

    // 从num1输入框获取文字内容并转换成数字类型
    var num1 = parseFloat(num1El.value);

    // 获取id为num2的输入框
    var num2El = document.getElementById('num2');

    // 从num2输入框获取文字内容并转换成数字类型
    var num2 = parseFloat(num2El.value);

    // 获取id为operator的下拉框
    var operatorEl = document.getElementById('operator');

    // 从下拉框获取当前选中的内容
    var operator = operatorEl.value;

    // 后端服务的地址
    var requestUrl = '/calc';

    // 要发送到后端的数据
    var requestParams = 'num1=' + num1 + '&num2=' + num2 + '&operator=' + encodeURIComponent(operator);

    // 把上面的地址和数据拼到一起来
    var url = requestUrl + '?' + requestParams;

    // 创建一个XMLHttpRequest对象,通过它来和后端服务进行通信交互
    var xhr = new XMLHttpRequest();

    // 设置当后端请求产生反馈后的处理
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            // 成功
            if (xhr.status === 200) {
                alert('计算结果是:' + xhr.responseText);
            }
            // 失败
            else {
                alert('请求服务器失败');
            }
        }
    };

    // 开始发送请求
    xhr.open('GET', url, true);
    xhr.send(null);
}

这个代码中,直接使用了XMLHttpRequest的API来进行服务的调用,没有考虑到在不同浏览器上的兼容问题,代码也比较冗长,在现在的实际开发中,我们已经不太会采用了,取而代之的是使用经过良好封装的开源库,如jQuery, axios等。

我们来看一下使用这些开源库的API是如何来实现等价的服务调用功能的。

这是使用jQuery改写成的版本:

function calc() {
    $.ajax({
        method: 'get',
        url: '/calc',
        data: {
            num1: parseFloat($('#num1').val()),
            num2: parseFloat($('#num2').val()),
            operator: $('#operator').val()
        }
    }).then(function (result) {
        alert('计算结果是:' + result);
    }).catch(function () {
        alert('请求服务器失败');
    });
}

而这是使用axios改写成的版本:

function calc() {
    axios({
        method: 'get',
        url: '/calc',
        params: {
            num1: parseFloat(document.getElementById('num1').value),
            num2: parseFloat(document.getElementById('num2').value),
            operator: document.getElementById('operator').value
        }
    }).then(function (response) {
        alert('计算结果是:' + response.data);
    }).catch(function () {
        alert('请求服务器失败');
    });
}

可以看到,使用jQuery或axios改写的版本,从代码上来说,要比使用原始XMLHttpRequest API的版本要简洁,而且都支持Promise,所以在写异步流程控制代码方面,显得要方便很多。另外,这些库都考虑到了浏览器之间的兼容问题,所以同样的代码在不同的浏览器上运行,都没什么问题。

在Node.js中调用HTTP服务

看完浏览器端的调用,我们再转到服务端来。在Node.js的服务端代码中,如果要发起对其他HTTP服务的调用的话,Node.js提供了一个叫做http的模块。

我们在Node.js中去调用一个天气预报的API,代码看起来会是这样子的:

const http = require('http');

http.get('http://www.weather.com.cn/data/sk/101190401.html', function (req, res) {
    let result = '';
    req.on('data', function (data) {
        result += data;
    });
    req.on('end', function () {
        console.info(result);
    });
});

执行这段代码,可以得到类似如下的结果:

{"weatherinfo":{"city":"苏州","cityid":"101190401","temp":"17","WD":"东南风","WS":"2级","SD":"44%","WSE":"2","time":"17:05","isRadar":"0","Radar":"","njd":"暂无实况","qy":"1017","rain":"0"}}

是不是也挺简单的?这是Node.js自带的模块,其实还有很多第三方的开源库可以用,比如request,或者是前面提到过的axios(它同时支持浏览器端和Node.js端)。作为全栈JS开发,我们非常希望代码复用性强,风格统一,因此,我推荐无论在浏览器端还是Node.js端,我们都可以统一使用axios来编写HTTP服务调用代码。

所以,我们继续来用axios改写一下上面的代码:

记得先安装一下axios模块: npm install axios

const axios = require('axios');

axios({
    method: 'get',
    url: 'http://www.weather.com.cn/data/sk/101190401.html'
}).then(function (response) {
    console.log(response.data);
}).catch(function () {
    console.log('请求服务器失败');
});

总结

通过上述简单的例子,希望能让你触类旁通,然后通过自己的深入学习了解,完全掌握客户端和服务端的概念,以及两者之间的内在联系。

点击下载本文的完整代码

新的一年,学习创造新的价值。 欢迎关注一斤代码的系列课程《从编程小白到全栈开发》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web行业观察

并发模型与事件循环 /mdn

JavaScript 的并发模型基于“事件循环”。这个模型与像 C 或者 Java 这种其它语言中的模型截然不同。

14240
来自专栏IMWeb前端团队

xss漏洞挖掘思路

前言 xss作为江湖上一种常见的攻击手段,一直有广泛的使用。然而怎么样发现一个交互的地方是否会有xss漏洞呢?有一些通用的思路。一下就是思路的总结。 攻...

31570
来自专栏喵了个咪的博客空间

phalapi-进阶篇3(自动加载和拦截器)

#phalapi-进阶篇3(自动加载和拦截器)# ? ##前言## 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这样一个优秀的开源框架. ...

27630
来自专栏柠檬先生

你不知道的javaScript笔记(7)

异步:现在与将来   分块的程序     可以把JavaScript 程序写在单独的js 文件中,这个程序是由多个块组成的,这些块     中只有一个是现在执行...

21450
来自专栏达摩兵的技术空间

惰性单例分析与学习

本文基于你已经知道单例模式的要点,本文内容借鉴于《javascript设计模式与开发实践》这本书,做出了整理和一些思考。

8210
来自专栏小詹同学

Python爬虫系列之一——我有100万?

高中生都开始写爬虫了,可见爬虫有多热门,一个某某985高校的研究生不学习学习爬虫实在是有些落伍啦~ ? 一、网络爬虫和url ...

38460
来自专栏谈补锅

汇编语言学习

   7、1Byte = 8bit ;    1KB = 1024B ;  1MB = 1024KB ;   1GB = 1024MB

45530
来自专栏xingoo, 一个梦想做发明家的程序员

基于RequireJS和JQuery的模块化编程——常见问题解析

由于js的代码逻辑越来越重,一个js文件可能会有上千行,十分不利于开发与维护。最近正在把逻辑很重的js拆分成模块,在一顿纠结是使用requirejs还是sea...

320100
来自专栏我的安全视界观

【一起玩蛇】Nodejs代码审计中的器

63560
来自专栏玄魂工作室

老司机教你下载tumblr上视频和图片的正确姿势

本文面向初学者。 很多同学问我:“我非常想学Python编程,但是找不到兴趣点”。 还有的同学呢,找到了很好的兴趣点,但是无从下手,“玄魂老师,我想下载tumb...

1.4K70

扫码关注云+社区

领取腾讯云代金券