美文网首页
Vue从了解到清晰-Vue2.0中使用vue-jsonp解决跨域

Vue从了解到清晰-Vue2.0中使用vue-jsonp解决跨域

作者: zoomlaCMS | 来源:发表于2020-02-14 09:44 被阅读0次

    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解决跨域

          本文链接:https://www.haomeiwen.com/subject/dtqdfhtx.html