JS中的网络请求----从懵逼到。。。。会对接口

前言

最近在给工作室的新人们叨叨了一下怎么发http请求,怎么对接口。觉得这点东西可能会有点意思,刚好最近也因为要做webgis的一个项目需要使用到原生的JavaScript,借此机会,也算是做一个复习。

本文适合知道网络请求是什么东西的童鞋,我会从最最基础的部分开始说起,让你学会怎么样发一个请求,再处理拿到的响应数据,如果你觉得不适合,就不要接着看了,可能会浪费时间的哦。

因为要回归 JavaScript 基础嘛,所以我想要多写一些文章吧,从使用 jQuery 中封装好的 $.ajax() 开始,再到基于 promise 的 fetch,然后到最近很火的 axios,都会慢慢说。

到最后,我看看自己的实力,能不能把如何使用原生的 JavaScript 实现 ajax 说明白,就是这样。

接口是什么

在前后端没有分离的时代,对不起,我没有经历过那个年代。那个时候,前端在某种程度上是后端的附属。后来随着网页功能的丰富和业务逻辑的复杂,前后端开始分离。我们要说的接口,就在那个时候。。。我不知道是不是诞生,反正就是在用了。(PS:默认指的是REST接口)

前后端交互就是使用接口(API)来进行通信,后端更专注于业务逻辑的处理,前端更专注于数据的展示,各司其职,效率得到了极大的提升。

简单的说,接口就是前端向后端请求数据用的,前端通过接口给后端发一些数据,后端同样可以再通过接口给前端返回一些数据,这就是接口最常见的作用。换言之,接口就是干这个用的。

然后我们形象的称这个过程叫做“对接口”。

怎么“对接口”之发送信息

我们假设一个场景。假如你来到了一个完全陌生的地方,你要问路。

然后我们就要想,要完成问路这个显然不是那么容易的操作,我们需要知道些什么,做些什么?

  1. 问路的人
  2. 怎么去找那个问路的人
  3. 你要问的人说啥语言
  4. 你要用那个人懂得的语言,和他们说些什么

很符合常理对不对?或者说,离开了这四样,恐怕问路怕是会有一定的难度,但是也不是不可实现。

哪一样是不能缺的?

肯定是 问路的人 啦,别的困难都可以克服嘛

对接口也是一样的。我们要必须指定:

至于后面这些,一般也会有

  1. 请求方式是什么(type),相当于我们问路时候,得有办法去找那个人,对吧(不清楚常见的http请求方式的童鞋这边走
  2. 传输数据的格式(dataType),就相当于那个人懂得的语言嘛。听不懂还怎么问路。。。
  3. 传输数据的内容(data),问路总要说的什么吧。。。

好,现在我们确定的是,我们要对接口,最基本的就是要指定url,type,dataTypedata都是什么吧。。当然如果当地人非要和你对个暗号,看看信物啥的,先不讨论哈。

现在我们使用 jQuery 中封装好的 $.ajax() 来示例一下,怎么用代码来实现上述的内容(先写个啦)

$.ajax({
    url: "localhost:3000/api/book",
  });

enough. 这个就是最简单的请求了。

一般我们会怎么写呢?

$.ajax({
    url: "localhost:3000/users/login",
    type: "POST",
    dataType: "json",
    data: {
      mobile: "12345678901",
      password: "123456"
    }
  });

为了简单起见,密码明文传输,实际使用中一般不允许明文传输密码的哦~

就这样,信息就发送出去了。当然,我们发的信息应该是后端需要我们提供的信息哦~

怎么“对接口”之处理响应

在我们给后端发送完信息之后,后端需要去反映一下下,然后再把我们请求的数据发回给我们,有去有回的哈。这才叫做“通信”。

如果使用上述的登录接口的话,如果没有出意外的话,后端返回的消息应该是这个样子的,当然别的样子也是可以的,因后端而异:

{
    "code": 0,
    "data": {
        "user": {
            "userId": 21,
            "mobile": "1"
        },
        "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxIiwiZXhwIjoxNTA2MDI5MTU2NDAwfQ.WJkcigagWIf9-XCGlTDxrJHKgQ1twgQRPMruCZmPYKI"
    }
}

当然,可能会这个样子:

{
    "code": 10001,
    "data": {
        "msg": "incorrect password"
    }
}

或者,这个样子:

{
    "code": 10001,
    "data": {
        "msg": "incorrect username"
    }
}

总之,后端正常情况下,会在你发完消息之后,返回一些数据。那么我们下面的问题就是 处理数据

在 jQuery 中封装好的 $.ajax() 中,我们使用回调函数来处理数据,接着上面的代码写,我们的代码如下:


$.ajax({
    url : "localhost:3000/users/login",
    type: "POST",
    dataType: "json",
    data: {
      mobile: "12345678901",
      password: "123456"
    },
    success: function(res) {
      console.log('the response is:')
      console.log(res)
    },
    error: function(err) {
      console.error(err)
    }
  });

如代码中所写,success 回调中用来处理正常的返回数据,也就是我们的第一种情况。后面两种都是异常情况,使用 error 回调处理一下就OK啦。

这样,处理响应部分也就说完了。

最后要说的

这里提到的请求是最基本,最简单的。就像文中提到的问路的那个例子,如果人家要求对对暗号,出示信物咋办?这个以后再说

看到这里,恭喜你已经学会了最简单的接口怎么对,那么可能你会想知道自己到底有没有学会。我同样将文中使用的接口服务器提供出来,就在我的Github上,对应的仓库是expressApi。如果对你有帮助,请不要吝啬star….

thx………一夜没睡,好累。

2017-09-15 5:43

Table of Contents