zoukankan      html  css  js  c++  java
  • vue

    今天我们来讲讲vue中调api的两种常见方法。

    由于vue2.0开始,对vue-resource不在维护更新。所以导致很多人开始入坑axios。

    当我用起了axios,嗯,它是真的坑。最坑的是它不支持跨域。

    如果你项目打包上线依旧需要跨域,我劝你就不要用axios 了 ,会把自己坑死的。(这时候就可以用vue-resource)

    但是如果只是在环境上测试,你可以使用 proxyTable代理。

    具体使用如下,找到config文件夹中的index.js文件:

    proxyTable: {
                '/api':{
                    target:'https://api.douban.com',
                    changeOrigin:true,
                    pathRewrite:{
                        '/api':''
                    }
                }
            }

    调用时:

    that.$axios.post('/api//v2/movie/top250').then(function(response){console.log(response.data);
      }).catch(function(error){
       console.log(error);
     });

    这里就相当于用 /api  == https://api.douban.com

    但是如果打包后还是要实现跨域,那么用vue - resource 吧,小伙子别执着了。

    vue - reource 安装步骤

     1. npm install vue-resource --save

     2. 找到main.js 

      import  VueResource  from 'vue-resource'

      Vue.use(VueResource)

    跨域调用:

    that.$http.jsonp("http://xxxxxxxxxxx",{params:{"callback":"jsonPCallback"}}).then(function(response){
                        console.log(response.body);
                    });

    ok,收工。

  • 相关阅读:
    ASCII到Unicode到UTF-8
    .NET项目引用黄色小三角以及找不到依赖的解决方法
    MongodbHelper
    SqlHelper分享
    C#_02.16_基础七_.NET表达式&运算符
    C#_02.15_基础六_.NET类
    C#_02.14_基础五_.NET类
    C#_02.13_基础四_.NET方法
    C#_02.13_基础三_.NET类基础
    C#_02.12_基础二_.NET类型存储和变量
  • 原文地址:https://www.cnblogs.com/lafitewu/p/8780450.html
Copyright © 2011-2022 走看看