vue中的axios发送ajax请求-蒲公英云

vue中的axios发送ajax请求

小灰灰 2021-12-24 00:21 489阅读 0赞

1.安装axios：执行命令 npm install axios —save

2.重启：npm run dev

3.使用axios

import axios from 'axios'    //1.引入axios
export default {
  name: 'Home',
  components: {
    HomeHeader
  },
  methods: {
    getHomeInfo: function () {  //4.帮助我们获取ajax数据
      axios.get('/api/index.json')
            .then(this.getHomeInfoSucc)      //5.返回数据
    },
    getHomeInfoSucc: function (res) {
      console.log(res)   //6.接收数据打印出来
    }
  },
  mounted: function () {   //2.当页面挂载好了之后
    this.getHomeInfo()     //3.去执行函数
  }
}

3.1线上是请求‘/api’开头的地址，线下是请求‘/static/mock’开头的地址，在线下开发后转到线上再去改动地址的话会有风险，为了解决这一问题：在开发的时候就用api开头的地址，有个转化机制，自动就去我本地的static地址下去请求

3.2. watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70

// webpack-dev-server工具提供
    proxyTable: {
      '/api': {                                //当请求api目录的时候
        target: 'http：//localhost:8080',        //帮助我们把请求转发8080这个端口上
        pathRewrite: {                         //路径做一个替换
          '^/api':'/static/mock'               //一旦请求地址以api开头，就替换请求到static上
        }
      }
    },