vue-resource:jsonp请求百度搜索的接口示例

关于“vue-resource:jsonp请求百度搜索的接口示例”的完整攻略，主要分为以下四步：

1.引入vue-resource库
通过npm或者CDN的方式引入vue-resource库，使其可以在项目中被使用。具体代码为：

<!-- 使用CDN引入vue-resource -->
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>

或者

npm install vue-resource --save

// 在main.js中引入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource)

2.设置请求的url和参数
要请求百度搜索的接口，需要设置请求的url和参数。具体的url和参数如下：

const BaiduUrl = 'https://www.baidu.com/su'

const BaiduParam = {
    wd: 'vue.js',
    cb: 'callback'
}

其中wd表示搜索的关键字，cb表示返回JSONP格式的回调函数名。

1. 发送JSONP请求
   利用vue-resource发送JSONP请求，具体代码如下：

Vue.http.jsonp(BaiduUrl, {params: BaiduParam})
  .then(response => {
    // 在此处处理成功返回的数据
  })
  .catch(error => {
    // 在此处处理请求失败的错误信息
  })

4.处理成功返回的数据
在response中，我们可以得到百度搜索接口返回的原始数据。由于JSONP的返回格式是一段回调函数，并不是JSON格式的数据，需要手动处理一下，具体代码如下：

Vue.http.jsonp(BaiduUrl, {params: BaiduParam})
  .then(response => {
    const dataRegex = /(\{.*\})/ // 使用正则表达式提取JSON格式的数据部分
    const jsonString = response.body.match(dataRegex)[0]
    const jsonData = JSON.parse(jsonString)
    // 在这里使用jsonData进行渲染等操作
  })
  .catch(error => {
    console.log(error)
  })

至此，“vue-resource:jsonp请求百度搜索的接口示例”的完整攻略已经介绍完毕。下面，我们列举两个具体的示例来加深理解。

示例一：请求百度搜索的相关联搜索词接口
关于百度搜索的接口中，还有一个相关联搜索词的接口，具体代码如下：

const BaiduRelatedUrl = 'https://www.baidu.com/sugrec'

const BaiduRelatedParam = {
    prod: 'pc',
    wd: 'vue.js',
    cb: 'callback'
}

相应地，我们需要在第三步的部分将url和params进行修改，其他的步骤均不变即可。

示例二：请求豆瓣电影Top250的数据接口
如果我们想要在Vue.js中请求豆瓣电影Top250的数据接口，我们需要将url和参数进行如下设置：

const DoubanUrl = 'https://api.douban.com/v2/movie/top250'

const DoubanParam = {
    start: 0,
    count: 10,
    callback: 'callback' // 回调函数名，必须为callback
}

在第三步中，我们需要讲url和params进行如下设置：

Vue.http.jsonp(DoubanUrl, {params: DoubanParam})
  .then(response => {
    console.log(response.body)
  })
  .catch(error => {
    console.log(error)
  })

经过以上四个步骤，我们就可以在Vue.js中使用vue-resource请求JSONP接口并得到响应的数据。