Vue-Resource发送get-post-jsonp请求

vue-resource - npm

Vue-Resource是提供了使用XMLHttpRequest或JSONP发送web请求和处理响应服务的一个Vue.js插件。

这里我们新建一个项目，来完成Resource请求的学习。

创建完成后同时完成相应的配置。暂时我们没有涉及到组件，因此可以先把不需要的部分删掉。

具体创建项目参考博客【前端学习】专栏下的创建vue项目的文章进行学习。

https://blog.csdn.net/weixin_46474921/category_11988425.html?spm=1001.2014.3001.5482

---

目录

 一、vue-resource导入

引入Vue-Resource实现ajax请求开发步骤:  

 1. 安装vue-resource依赖:

2、导入vue-reources,并调用Vue.use(vue-reources)方法使用vue-resource插件 

 二、vue-resource发送请求

 1、get请求

 2、post请求

 3、jsonp请求

三、Vue-resource设置全局http参数 

---

 一、vue-resource导入

引入Vue-Resource实现ajax请求开发步骤:  

 1. 安装vue-resource依赖:

首先在vscode工具中切换到我们的项目下：cd 05_vueresource

安装依赖：cnpm i vue-resource –S 

2、导入vue-reources,并调用Vue.use(vue-reources)方法使用vue-resource插件 

// 使用vue-resource插件
import VueResource from 'vue-resource'

// 全局注册使用
Vue.use(VueResource)

 二、vue-resource发送请求

 vue-resource发送网络请求，获取服务器数据: 分别发送get、post、jsonp请求

 1、get请求

 this.$http:获取vue-resource的http请求对象

发送 get 请求 :示例接口:获取短视频

这里找到一些免费的API接口，大家也可以自行查找

免费开放API接口 - 掘金 (juejin.cn)

我们首先复制链接进行查看：https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2

​

接下来编写get请求： 

  methods: {
    getInfo() {
      // vue-resource发送get请求
      this.$http.get('https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2').then(function (data) {
        //data参数就是服务器接口返回给客户端的数据：json 
        console.log(data);   // 拿到服务器返回的成功的数据
      })
    }

 测试一下：

​

​

此时我们可以看到通过get请求，后台给我们返回的封装的数据结构。

接下来我们想拿到服务器数据，应该如下：

​​

 点击get请求，则会获取到内容，如下：（在这里我们采用的是以前的api，大家可自行更换）

​

 2、post请求

 this.$http:获取vue-resource的http请求对象

 发送post请求:示例接口:小说搜索接口

1: 发送post请求，默认没有表单格式的，要指定enctype:

application/x-wwww-form-urlencoded

post方法的第三个参数：{emulateJSON: true}就是设置提交表单类型。

2：post方法的第二个参数，设置提交参数 eg: name:”鬼吹灯” 表示搜索名字是鬼吹灯的小说

 3、jsonp请求

由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全，实现跨域请求的原理是通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP。 

vue-resource支持直接发送jsonp请求：示例接口:360搜索

 

在同一个html中如果用get请求发送360搜索，是行不通的，因为访问了一个不同的服务器，浏览器是不支持的，所以直接发送jsonp请求

三、Vue-resource设置全局http参数 

在真实项目中，我们所请求的接口地址都是有接口文档的，是有一定规范，比如: 接口的请求根路径都是相同，默认ajax传输格式也都是json。

 Vue使用vue-resource后，配置全局http参数, 可以减少发送请求的一些重复操作  

 发送请求时，就可以省略主机路径部分，发送post请求时，也不用单独设置参数了:

//url地址一定不能带/
this.$http.get('satinApi?type=1&page=1').then(function (result) {
    console.log(result.body)
    this.items = this.items.concat(result.body.data);
})
this.$http.post('novelSearchApi', {name: "鬼吹灯"}).then(result => {
        console.log(result.body) 
})

1: 请求的url的路径相同部分可以省略了.

2: 发送post请求时候，第三个表单参数类型可以省略了。