vue3 快速入门 (六) : vue中调用HTTP请求

news2024/11/18 17:30:32

1. 本文环境

Vue版本 : 3.4.29
Node.js版本 : v20.15.0
系统 : Windows11 64位
IDE : VsCode 1.91.0

2. 访问HTTP

在Vue中，访问HTTP，可以使用axios第三方库。

axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。
axios使用简单，包尺寸小且提供了易于扩展的接口。

2.1 安装axios

CMD进入项目根目录下，然后执行如下命令，安装axios

npm install axios

卸载的命令是 npm uninstall axios

2.2 编写HTTP请求相关代码

这里我们以请求http://www.baidu.com/接口，发起GET请求为例

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';

let message = ref("")

const loadBaiduInfo = async () => {
  let response = await axios.get('http://www.baidu.com/')
  message.value = response.data
}
</script>

<template>
  <div>
    <p> 数据:{{ message }}</p>
    <button @click="loadBaiduInfo">获取数据</button>
  </div>
</template>

<style scoped></style>

2.3 运行项目

运行项目，点击获取数据按钮，发现没有反应。
点击F12，进入开发者工具，在Console中可以看到如下错误 : No 'Access-Control-Allow-Origin' header is present on the requested resource.

在这里插入图片描述
这个错误是什么原因呢 ? 是跨域问题。

2.4 跨域问题是什么

跨域问题，是Web开发中经常遇到的一个问题，它主要涉及浏览器安全策略，防止恶意网站读取另一个网站的数据。

跨域问题（Cross-Origin Resource Sharing，简称 CORS）出现在Web开发中，特别是进行前端（如JavaScript）编程时，尝试从一个域（Domain）访问另一个域的资源（如API接口、图片、脚本等）。这是由于浏览器实施的同源策略（Same-origin policy）所引起的。

同源策略是一项重要的安全措施，用于限制一个网页上的脚本只能与同源的服务器交互，以防止恶意网站读取另一个网站的数据。同源指的是两个URL的协议、域名和端口号完全相同。如果这三个条件中任何一个不匹配，就认为是跨域。

2.5 解决跨域问题

那么怎么解决跨域问题呢 ?
只需要在vite.config.ts中，配置好代理服务器。

server: {
  //host: '0.0.0.0',
  //https : false,
  port: 18935,
  proxy: {
    '/myapi': {
      target: 'https://www.baidu.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/myapi/, '')
    }
  }
},

然后将axios的请求也改成/myapi

let response = await axios.get('/myapi')

再次运行项目，可以发现接口访问成功了

在这里插入图片描述

3. Post请求

发起一个 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

发起多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);

// OR

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function ([acct, perm]) {
    // ...
  });

4. vue快速入门系列文章

vue3 快速入门 (一) : 环境配置与搭建
vue3 快速入门 (二) : 第一个Vue网页
vue3 快速入门 (三) : vue中的图片路径
Vue3 快速入门 (四) : 使用路由实现页面跳转
vue3 快速入门 (五) : Flex布局
vue3 快速入门 (六) : vue中调用HTTP请求