Vue从了解到清晰-Vue2.0中使用vue-jsonp解决跨域问题(看看这篇就够了)

1、执行命令:

npm install vue-jsonp --save

2、src/main.js中添加:

  import VueJsonp from 'vue-jsonp'
  Vue.use(VueJsonp)

3、其它组件中基本使用方法:

  this.$jsonp(rootApi+'/company/Info'', 传参参数对象{} ).then(json => {
    // 返回数据 json, 返回的数据就是json格式
  }).catch(err => {
    console.log(err)
  })

4、其他实例:

4.1:

    this.$jsonp(ApiRoot+'/company/Info', 
        {
          callbackQuery: 'callbackParam', // jsonp key //请求传递参数 1
          callbackName: 'jsonpCallback', // jsonp key //请求传递参数 2
          name: 'zhangsan', //请求传递参数 3
          type: 6 //请求传递参数 4
        } 
        ).then(json => {
          // 返回数据 json, 返回的数据就是json格式
        }).catch(err => {
          console.log(err)
        })

4.2:

        this.$jsonp(ApiRoot+'/company/Info', 
          Object.assign(this.$store.state.common, {callbackQuery: 'callbackParam', callbackName: 'jsonpCallback'})
        ).then(json => {
          _this.pageData = json.result
        }).catch(err => {
          console.log(err)
        })

说明:Object.assign() 为 es6 javascript对象方法,功能是合并多个对象数据

你可能感兴趣的:(Vue从了解到清晰-Vue2.0中使用vue-jsonp解决跨域问题(看看这篇就够了))