vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟

更新時(shí)間：2024年07月29日 10:17:01 作者：氦客

這篇文章主要介紹了vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定幫助,需要的朋友可以參考下

1. 本文環(huán)境

Vue版本 : 3.4.29
Node.js版本 : v20.15.0
系統(tǒng) : Windows11 64位
IDE : VsCode 1.91.0

2. 訪問(wèn)HTTP

在Vue中，訪問(wèn)HTTP，可以使用axios第三方庫(kù)。

axios 是一個(gè)基于 promise 的網(wǎng)絡(luò)請(qǐng)求庫(kù)，可以用于瀏覽器和 node.js。
axios使用簡(jiǎn)單，包尺寸小且提供了易于擴(kuò)展的接口。

2.1 安裝axios

CMD進(jìn)入項(xiàng)目根目錄下，然后執(zhí)行如下命令，安裝axios

npm install axios

卸載的命令是 npm uninstall axios

2.2 編寫(xiě)HTTP請(qǐng)求相關(guān)代碼

這里我們以請(qǐng)求http://www.baidu.com/接口，發(fā)起GET請(qǐng)求為例

<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> 數(shù)據(jù):{{ message }}</p>
    <button @click="loadBaiduInfo">獲取數(shù)據(jù)</button>
  </div>
</template>

<style scoped></style>

2.3 運(yùn)行項(xiàng)目

運(yùn)行項(xiàng)目，點(diǎn)擊獲取數(shù)據(jù)按鈕，發(fā)現(xiàn)沒(méi)有反應(yīng)。
點(diǎn)擊F12，進(jìn)入開(kāi)發(fā)者工具，在Console中可以看到如下錯(cuò)誤 : No 'Access-Control-Allow-Origin' header is present on the requested resource.

這個(gè)錯(cuò)誤是什么原因呢 ? 是跨域問(wèn)題。

2.4 跨域問(wèn)題是什么

跨域問(wèn)題，是Web開(kāi)發(fā)中經(jīng)常遇到的一個(gè)問(wèn)題，它主要涉及瀏覽器安全策略，防止惡意網(wǎng)站讀取另一個(gè)網(wǎng)站的數(shù)據(jù)。

跨域問(wèn)題（Cross-Origin Resource Sharing，簡(jiǎn)稱(chēng) CORS）出現(xiàn)在Web開(kāi)發(fā)中，特別是進(jìn)行前端（如JavaScript）編程時(shí)，嘗試從一個(gè)域（Domain）訪問(wèn)另一個(gè)域的資源（如API接口、圖片、腳本等）。這是由于瀏覽器實(shí)施的同源策略（Same-origin policy）所引起的。

同源策略是一項(xiàng)重要的安全措施，用于限制一個(gè)網(wǎng)頁(yè)上的腳本只能與同源的服務(wù)器交互，以防止惡意網(wǎng)站讀取另一個(gè)網(wǎng)站的數(shù)據(jù)。同源指的是兩個(gè)URL的協(xié)議、域名和端口號(hào)完全相同。如果這三個(gè)條件中任何一個(gè)不匹配，就認(rèn)為是跨域。

2.5 解決跨域問(wèn)題

那么怎么解決跨域問(wèn)題呢 ?
只需要在vite.config.ts中，配置好代理服務(wù)器。

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的請(qǐng)求也改成/myapi

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

再次運(yùn)行項(xiàng)目，可以發(fā)現(xiàn)接口訪問(wèn)成功了

3. Post請(qǐng)求

發(fā)起一個(gè) POST 請(qǐng)求

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

發(fā)起多個(gè)并發(fā)請(qǐng)求

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

到此這篇關(guān)于vue中調(diào)用HTTP請(qǐng)求的詳細(xì)步驟的文章就介紹到這了,更多相關(guān)vue調(diào)用HTTP請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: