Vue.js 与 Axios 实战：从发送 AJAX 请求到 API 代理配置全攻略
<p>本文已收录在Github，<strong>关注我，紧跟本系列专栏文章，咱们下篇再续！</strong></p><ul>
<li>🚀 魔都架构师 | 全网30W技术追随者</li>
<li>🔧 大厂分布式系统/数据中台实战专家</li>
<li>🏆 主导交易系统百万级流量调优 & 车联网平台架构</li>
<li>🧠 AIGC应用开发先行者 | 区块链落地实践者</li>
<li>🌍 以技术驱动创新，我们的征途是改变世界！</li>
<li>👉 实战干货：编程严选网</li>
</ul>
<h2 id="0-前言">0 前言</h2>
<p>Axios，流行的 js 库，用于发送 AJAX 请求。本文介绍Vue中咋用 Axios 发 AJAX 请求。</p>
<h2 id="1-安装">1 安装</h2>
<p>先在项目中安装 Axios。进入项目目录运行：</p>
<pre><code class="language-bash">cnpm install axios@0.17.1 --save
</code></pre>
<h2 id="2-发送-ajax-请求">2 发送 AJAX 请求</h2>
<p>在 Vue 组件中用它发 AJAX 请求。</p>
<h3 id="示例">示例</h3>
<pre><code class="language-vue"><template>
<div>
<button @click="getData">获取数据</button>
<div v-if="data">{{ data }}</div>
</div>
</template>
<script>
// 先导 Axios 库
import axios from 'axios';
export default {
data() {
return {
// 在组件的data()方法定义一个data属性，存储从服务器获取的数据
data: null,
};
},
methods: {
//定义该方法，用于发送 AJAX 请求并更新组件的data属性
getData() {
axios
.get('/api/data')
.then((response) => {
this.data = response.data;
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
</code></pre>
<p>在 <code>getData</code> 方法中，用 <code>axios.get</code> 方法发送 GET 请求。该方法接受一个 URL 参数，用于指定要请求的服务器端点。本例用 <code>/api/data</code> 作为 URL。</p>
<p>再用 Promise 的 <code>then</code> 方法处理响应，如果：</p>
<ul>
<li>请求成功，<code>then</code> 将接收一个响应对象，并将响应数据存储到组件的 <code>data</code> 属性中</li>
<li>请求失败，则用 Promise 的 <code>catch</code> 方法处理错误</li>
</ul>
<p>最后，在组件模板中，用一个按钮触发 <code>getData</code> 方法，并根据是否有数据来显示数据。</p>
<h2 id="3-项目实战">3 项目实战</h2>
<p>组件很多，若每个组件都发 HTTP 请求，性能太差。咋优化？希望整个首页只发送一个 ajax 请求。显然，在 Home.vue 里发送最好不过。</p>
<p>组件有个生命周期函数 mounted：</p>
<pre><code class="language-js">methods: {
getHomeInfo () {
// 本地 mock 数据
// axios.get('/api/index.json?city=' + this.city)
axios.get('/static/mock/index.json')
.then(this.getHomeInfoSuccess)
},
getHomeInfoSuccess (res) {
}
},
mounted () {
this.getHomeInfo()
}
</code></pre>
<p>有人觉得，本地mock 执行</p>
<pre><code class="language-js">axios.get('/static/mock/index.json')
.then(this.getHomeInfoSuccess)
</code></pre>
<p>上线前，再改成</p>
<pre><code class="language-js">axios.get('/api/index.json?city=' + this.city)
</code></pre>
<p>真麻烦，万一忘了，很烦。还好 Vue 帮解决这问题。修改脚手架文件：index.js</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513140541124-2088814739.png" class="lazyload"></p>
<pre><code class="language-js">'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* webpack-dev-server 提供的功能
*
* /api开头的请求代理到http://localhost:8080/static/mock
* proxyTable是一个对象，用于配置代理规则
* '/api'是代理规则的路径，表示所有以/api开头的请求都会被代理
* target是代理的目标地址，即将请求转发到的地址
* pathRewrite是路径重写规则，用于将请求路径中的'/api'替换成'/static/mock'
*/
proxyTable: {
'/api': {
target: 'http://localhost:8080',
pathRewrite: {
'^/api': '/static/mock'
}
}
},
</code></pre>
<p>改变了配置项，所以需要重启服务：</p>
<p>可见，请求成功，拿到数据了：</p>
<p><img alt="" loading="lazy" src="https://img2024.cnblogs.com/other/1097393/202505/1097393-20250513140542424-622989512.png" class="lazyload"></p>
<h2 id="4-总结">4 总结</h2>
<p>功能强大的 js 库，可发送 AJAX 请求。在 Vue 中使用 Axios 可轻松与服务器进行通信，并从服务器获取数据。</p>
<blockquote>
<p>本文由博客一文多发平台 OpenWrite 发布！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/JavaEdge/p/18874165
頁:
[1]