首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue调用HTTP请求

vue中调用HTTP请求的详细步骤

2024-07-29 10:17:02 作者：氦客

这篇文章主要介绍了vue中调用HTTP请求的详细步骤,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定帮助,需要的朋友可以参考下

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]) {
    // ...
  });

到此这篇关于vue中调用HTTP请求的详细步骤的文章就介绍到这了,更多相关vue调用HTTP请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！