Vuejs基本知识(七)【发送http请求】

待我称王封你为后i 2021-06-26 16:06 825阅读 0赞

# 发送http请求 #

TODO: 需要加上 `http resource`, 在 `main.js`。

只要有`js`的地方，就要有接口。 特别是我们这样前后端分离的SPA， 几乎每个页面都要发起`http`请求。从后台接口读取数据，并且显示在前台页面。

这就需要用到`http`请求了.

## 1. 调用`http`请求 ##

`vuejs` 内置了对发送`http`请求的支持. 只需要在对应页面的`script` 标签内加上对应的代码就好.  
例如:

我们新增一个页面,叫 “博客列表页” : `src/components/BlogList.vue`, 它的作用是从我的个人网站([http://siwei.me][http_siwei.me]) 上，读取文章的标题，并且显示出来。

代码如下:

<template>
      <div >
        <table>
          <tr v-for="blog in blogs">
            <td>{
       {blog.title }}</td>
          </tr>
        </table>
      </div>
    </template>
    
    <script> export default { data () { return { title: '博客列表页', blogs: [ ] } }, mounted() { this.$http.get('api/interface/blogs/all').then((response) => { console.info(response.body) this.blogs = response.body.blogs }, (response) => { console.error(response) }); } } </script>
    
    <style > td { border-bottom: 1px solid grey; } </style>

上面的代码中， 我们先看 `<script/>`代码段，

export default { 
      data () { 
        return { 
          title: '博客列表页',
          blogs: [
          ]
        }
      },
      mounted() { 
        this.$http.get('api/interface/blogs/all').then((response) => { 
           console.info(response.body)
           this.blogs = response.body.blogs
        }, (response) => { 
           console.error(response)
        });
      }
    }

上面代码中，先是定义了两个变量： `title`, `blogs`, 然后定义了一个 `mounted` 方法。该方法表示当页面加载完毕后应该做哪些事情。  
是一个钩子方法。

this.$http.get('api/interface/blogs/all').then((response) => { 
       console.info(response.body)
       this.blogs = response.body.blogs
    }, (response) => { 
       console.error(response)
    });

上面代码，是发起`http`请求的核心代码。 访问的接口地址是 `api/interface/blogs/all` ， 然后使用 `then`方法做下一步的事情，  
`then`方法接受两个函数作为参数，第一个是成功后干嘛，第二个是失败后干嘛。

成功后的代码如下：

this.blogs = response.body.blogs

然后，在对应的视图部分显示：

<tr v-for="blog in blogs">
      <td>{ { blog.title }}</td>
    </tr>

## 2. 远程接口的格式 ##

在我的服务器上，读取个人博客标题的接口我已经提前做好了，是 ：

[http://siwei.me/interface/blogs/all][http_siwei.me_interface_blogs_all]

内容如下;

{ 
      blogs: [
        { 
          id: 1516,
          title: "网络安全资源",
          created_at: "2018-06-24T09:36:20+08:00"
        },
        { 
          id: 1515,
          title: "github - 邀请伙伴后，需要修改权限",
          created_at: "2018-06-20T15:03:33+08:00"
        },
        { 
          id: 1514,
          title: "ruby/rails - 根据浏览器的语言，来自动识别",
          created_at: "2018-06-19T08:28:44+08:00"
        }, 
        { 
          id: 1513,
          title: "google cloud - 申请VM的经验",
          created_at: "2018-06-09T16:42:08+08:00"
        },
        { 
          id: 1512,
          title: "验证码 - 使用geetest 或者网易云盾提供的动态二维码",
          created_at: "2018-06-07T09:28:14+08:00"
        }
        // 更多内容。。。
      ]
    }

在浏览器中打开后，如下图所示（使用了 `jsonview` 插件做了`json` 的代码格式化）:

![在这里插入图片描述][20181225132009162.png]

## 3. 设置 `Vuejs` 开发服务器的代理 ##

正常来说， `javascript`在浏览器中是无法发送跨域请求的，所以我们需要在`vuejs`的＂开发服务器＂上做个转发配置．

修改： `config/index.js`文件，增加下列内容：

module.exports = { 
      dev: { 
        proxyTable: { 
          '/api': {         // 1. 对于所有以 "/api"　开头的url 做处理．
            target: 'http://siwei.me',   // 3. 转发到 siwei.me 上．
            changeOrigin: true,
            pathRewrite: { 
              '^/api': ''  // 2. 把url中的　"/api" 去掉．
            }
          }
        },
    }

上面的代码做了三件事：

1.  对于所有以 “`/api`”　开头的`url` 做处理．
2.  把`url`中的　“`/api`” 去掉．
3.  把新的`url` 请求打到　`siwei.me` 上．

例如：

*  原请求：　　[http://localhost:8080/api/interface/blogs/all][http_localhost_8080_api_interface_blogs_all]
 *  新请求：　　[http://siwei.me/interface/blogs/all][http_siwei.me_interface_blogs_all]

注意：以上的代理服务器内容，只能在＂开发模式＂下才能使用．在生产模式下，只能靠服务器的`nginx`的特性来解决`js`跨域问题．

修改后的 `config/index.js`文件的完整内容如下：

var path = require('path')
    
    module.exports = { 
      build: { 
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        productionSourceMap: true,
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        bundleAnalyzerReport: process.env.npm_config_report
      },
      dev: { 
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
    
        proxyTable: { 
          '/api': { 
            target: 'http://siwei.me',
            changeOrigin: true,
            pathRewrite: { 
              '^/api': ''
            }
          }
        },
    
        cssSourceMap: false
      }
    }

重启服务器，可以看到我们的转发设置已经生效：

$ npm run dev
    ...
    [HPM] Proxy created: /api  ->  http://siwei.me
    [HPM] Proxy rewrite rule created: "^/api" ~> ""
    > Starting dev server...
    ...

## 4. 打开页面，查看`http`请求 ##

我们接下来，访问 `http://localhost:8080/#/blogs/`

打开`chrome developer tools`, 就可以看到，"Network"中，已经有请求发出去了，截图显示了结果：

![chrome dev tools中的network][chrome dev tools_network]  
![在这里插入图片描述][20181225134813777.png]

另外，我们也可以直接在浏览器中，输入要打开的链接，看到结果．(该浏览器使用了 json view插件)

![在这里插入图片描述][2018122513512050.png]

## 5. 把结果渲染到页面中． ##

我们发现，在`export`代码段中，有两个部分：

实际上，上面代码中，

*  `data`方法，是用于＂声明页面会出现的变量＂，并且赋予初识值.(非常重要，切记这一点)
 *  `mounted` 表示页面被`vue`渲染好之后的钩子方法，会立刻执行．

所以，我们要把发送`http`的请求，写到`mounted`方法中．（钩子方法还有`created`, 我们可以暂且认为  
`mounted`方法与`created`方法基本一样，一般我们在`Vue 2.0`中都使用`mounted`. 后续会说到区别. ）

mounted() { 
        this.$http.get('api/interface/blogs/all').then((response) => { 
           this.blogs = response.body.blogs
        }, (response) => { 
           console.error(response)
        });
      }

上面代码中：

*  `this.$http` 中的
 *  `this` 表示当前的`vue`组件（也即 `BookList.vue`)
 *  `$http` 所有以 `$`开头的变量，都是vue的特殊变量，往往是`vue`框架自带． 这里的`$http`就是可以发起`http`  
    请求的对象.
 *  `$http.get` 是一个方法，可以发起`get` 请求．只有一个参数就是目标`url`,
 *  `then()` 方法，来自于`promise`, 可以把异步的请求写成普通的非异步形式．  
    第1个参数是成功后的`callback`,  
    第2个参数是失败后的`callback`．
 *  `this.blogs = response.body.blogs` 中，是把远程返回的结果（`json` ），赋予到本地．　由于javascript  
    的语言特性，能直接支持`json`，所以才可以这样写．

然后，我们通过这个代码进行渲染：

<tr v-for="blog in blogs">
      <td>{
       {blog.title }}</td>
    </tr>

在上面的代码中：

*  `v-for`是一个循环语法，可以把`<tr>`这个元素进行循环． 注意：这个叫`directive`,　指令，需要跟标签一起使用．
 *  `blog in blogs`: 前面的 `blog` 是一个临时变量，用于遍历使用．

后面的`blogs` 是`http` 请求成功后，　`this.blogs = ...` 这个变量．

同时，这个`this.blogs` 是声明于　`data`钩子方法中．

*  \{ \{blog.title\}\} 用来显示每个`blog.title`的值

## 如何发起`post`请求？ ##

跟`get`特别类似，就是第二个参数是　请求的`body`.

在　`vue`的配置文件中　（例如　`webpack`项目的　`src/main.js` 中）增加下面一句：

import VueResource from 'vue-resource';
    Vue.use(VueResource);
    ....
    
    //增加下面这句：
    Vue.http.options.emulateJSON = true;

上面这句的目的，是为了能够让发出的post请求不会被浏览器转换成option　请求．

然后就可以按照下面的代码发送请求了：

this.$http.post('api/interface/blogs/all', { title: '', blog_body: ''})
    	.then((response) => { 
    		...
    	}, (response) => { 
    		...
    	});

在本书的 《表单的提交》 章节中，会对 http `POST` 的发送有个实际的例子，看起来会更加明白。

关于发送`http`请求的更多内容，请看： 官方文档：[https://github.com/pagekit/vue-resource][https_github.com_pagekit_vue-resource]

[http_siwei.me]: http://siwei.me
[http_siwei.me_interface_blogs_all]: http://siwei.me/interface/blogs/all
[20181225132009162.png]: /images/20210626/eaa79eb3e6074cac97c451f2c03f2f29.png
[http_localhost_8080_api_interface_blogs_all]: http://localhost:8080/api/interface/blogs/all
[chrome dev tools_network]: 
[20181225134813777.png]: /images/20210626/4f43f9c940f847ebb17cb742ad206657.png
[2018122513512050.png]: /images/20210626/f92c5cdec40c4e949a4a82a50e8aabb4.png
[https_github.com_pagekit_vue-resource]: https://github.com/pagekit/vue-resource