vue学习经验总结（axios的使用）

1：安装axiosnpm install axios --save （页面运行的使用需要调用）2：在项目的入口main.js文件中引入引入的时候直接引入不要带路劲importaxiosfrom"axios";Vue.prototype.axios=axios;并且将引入的axios对象挂载到原型对象中在其他的地方就都可以调用了在其他页面就可以调用了但是有巨坑如果调用数据调试使用cons

不及0908

141人浏览 · 2020-10-20 15:17:09

不及0908 · 2020-10-20 15:17:09 发布

1：安装axios

npm install axios --save （页面运行的使用需要调用）

2：在项目的入口main.js文件中引入引入的时候直接引入不要带路劲

import axios from "axios";

Vue.prototype.axios = axios;

并且将引入的axios对象挂载到原型对象中在其他的地方就都可以调用了

在其他页面就可以调用了但是有巨坑如果调用数据调试使用console 请加上window.console.log

3：在平时的项目中可以写相对路径去请求数据但是在cli4中需要对数据进行模拟（mock）

4：快速模拟数据第一步全局安装

npm install http-server

5：在进入需要模拟的数据文件夹下面启动命令 http-server --cors 启动一个允许跨域的服务

export default {

    mounted:function(){

 this.axios({

  method: 'get',

  url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=9667745',

  headers:{

      "X-Client-Info": '{"a":"3000","ch":"1002","v":"5.0.4","e":"15716520091065151890029","bc":"110100"}',

     "X-Host": "mall.cfg.common-banner"

  }

}).then(function(result){

    console.log(result);

})

 }

}

也可以使用第二种方式：进行反向代理的使用配置vue.config.js (简化的webpack)