vue中的网络请求

约 491 字大约 2 分钟

2025-08-01

vue 发送网络请求有以下几种方式

传统的 Ajax 方式是基于 XMLHttpRequest(XHR)，调用层级过多会出现回调地狱
jQuery-Ajax 是对原生 Ajax 的封装，太笨重，使用代码为 $.ajax $.get $.post
Vue-resource 是 vue1.0 时使用，需要下载安装 VueResource，使用代码为 $http.get()
axios【最常用】，本质也是对原生 XHR 的封装，是它的 Promise 实现版本

$ 在 vue 中表示全局变量或全局方法，如 $el $data $watch $refs $route

但某些第三方库也会用 $ 定义自己的属性和方法，如 jquery : import $ from 'jquery'

vue2 中使用 axios

安装： npm i axios
导入：可以在 main.js 配置，也可以在使用的单页面直接 import
使用：this.axios.get()

全局引入

main.js

import axios from "axios";

//挂载到 vue.prototype时有没有 $ 均可
Vue.prototype.axios = axios;

使用： App.vue

this.axios
  .get(url)
  .then((res) => {
    console.log("res", res.data);
  })
  .catch((err) => {
    console.log("err", err);
  });

非全局引入+使用

App.vue

import axios from "axios";

axios
  .get(url)
  .then((res) => {
    console.log("res", res.data);
  })
  .catch((err) => {
    console.log("err", err);
  });

跨域怎么办

目前可用的一个测试网址是 https://jsonplaceholder.typicode.com/posts/1 ，原先的网址失效了。

同时可以自己用 IDEA 或者 node.js 搭一个服务器，用本地网址类似 http://localhost:8081/all 测试。

如果暂时不想处理跨域问题，可以在 Chrome 装一个插件：Allow CORS: Access-Control-Allow-Origin

安装以后点一下，左下角有一个 ON|OFF，点一下 ON，插件图标变成彩色就可以屏蔽跨域了。

同时可以点击 Test CORS 测试跨域是否被屏蔽。