1. 本文環(huán)境

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

2. 訪問HTTP

在Vue中，訪問HTTP，可以使用axios第三方庫。

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

2.1 安裝axios

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

npm install axios

卸載的命令是 npm uninstall axios

2.2 編寫HTTP請求相關(guān)代碼

這里我們以請求http://www.baidu.com/接口，發(fā)起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> 數(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)沒有反應(yīng)。
點(diǎn)擊F12，進(jìn)入開發(fā)者工具，在Console中可以看到如下錯誤 : No 'Access-Control-Allow-Origin' header is present on the requested resource.

這個錯誤是什么原因呢 ? 是跨域問題。

2.4 跨域問題是什么

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

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

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

2.5 解決跨域問題

那么怎么解決跨域問題呢 ?
只需要在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的請求也改成/myapi

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

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

3. Post請求

發(fā)起一個 POST 請求

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

發(fā)起多個并發(fā)請求

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

最新評論