无法获取JSONP数据求助：Vue调用百度接口失败问题

别担心，我帮你梳理下这段代码里的几个关键问题，调整后应该就能正常获取数据了：

代码里的核心错误点 #

• JSONP调用的参数结构混乱：你把请求配置和then的链式调用位置写错了，$http.jsonp的正确参数顺序是「请求URL」→「配置对象」，然后再链式调用.then()处理响应。
• 错误回调的参数未定义：你在错误回调里用了res，但没把它作为参数传入，应该用err这类变量来接收错误信息。
• 遗漏Vue Resource依赖：Vue本身没有内置$http方法，你需要确保已经引入并注册了vue-resource插件，否则this.$http会报错。

修正后的完整代码 #

JavaScript部分 #

window.onload = () => {
  // 先注册vue-resource插件
  Vue.use(VueResource);
  
  var app = new Vue({
    el: '#app',
    data: {
      myData: [],
      t1: ''
    },
    methods: {
      get() {
        // 修正JSONP的参数结构和链式调用逻辑
        this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
          params: { // 请求参数要统一放在params字段下
            wd: this.t1
          },
          jsonp: 'cb' // 指定JSONP回调参数名，百度接口确实用cb
        }).then((res) => {
          this.myData = res.body.s; // vue-resource的响应数据存在body字段中，不是data
        }, (err) => {
          alert(err.status); // 用err接收错误信息，避免未定义报错
        })
      }
    }
  })
}

页面结构部分 #

<div id="app">
  <input type="text" v-model='t1' placeholder="输入关键词搜索" />
  <button @click="get">获取搜索建议</button>
  <!-- 新增列表展示返回的搜索建议 -->
  <ul v-if="myData.length > 0">
    <li v-for="item in myData" :key="item">{{ item }}</li>
  </ul>
</div>
<!-- 记得引入Vue和Vue Resource的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1/dist/vue-resource.min.js"></script>

额外说明 #

• 百度的搜索建议接口回调参数名确实是cb，你这里的配置是正确的；
• vue-resource返回的响应对象，实际数据存储在res.body而非res.data，这是容易踩坑的细节；
• 必须先执行Vue.use(VueResource)注册插件，否则this.$http会提示未定义。

内容的提问来源于stack exchange，提问作者Sylvia