vue中的axios发送ajax请求_vue axios ajax请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44285250/article/details/93745912

本文介绍如何在Vue项目中安装并配置Axios进行AJAX请求，包括使用Webpack-dev-server实现API请求的本地代理，确保开发环境下的数据请求稳定。文章详细展示了从安装Axios、设置请求代理到调用API的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.

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

所以：请求的是api，实际上vue会自动的帮我们做一个开发环境的转发请求的是static

重启服务器：npm run start

3.3将所有子组件的数据，都写在static/mock/index.json里面

（注意数据中，数组里面的最后一个对象的数据结尾不要有逗号，会出现数据解析错误）

3.4在网页中查看打印出来的数据