api調用 - daniel-qa/Vue GitHub Wiki

api調用

  • 時間差問題

要正確處理非同步流程，呼叫 async 函式時應加上 await，並確保呼叫端本身也是 async function。這樣可保證後續程式碼在資料取得後才執行，避免時間差問題。

  • Promise

Promise 並不是另一套機制，而是 JavaScript 處理非同步操作的基礎物件。

async/await 是基於 Promise 的語法糖，讓非同步程式碼更易讀。兩者本質上屬於同一個非同步處理機制

Promise 物件用於包裝非同步結果，可用 .then/.catch 處理。

非同步api範例

axios 非同步和同步

使用 getCurrentInstance 調用 API

  • 取得資料
const response = await proxy.$api.getAreas(requestData);
console.log(response, '发送消息返回');

if (response.state === 200) {
    // 在这里执行后续操作，确保数据已获取
    const data = response.data; // 假设返回的数据在 `response.data` 中
    console.log(data, '学区资料');
} else {
    ElMessage.error('取得資訊失败，状态码错误');
}    

const { state, result } = response;
  • 發送訊息
import { getCurrentInstance } from "vue";
let { proxy } = getCurrentInstance()

// 傳送訊訊
proxy.$api.sendMessage(requestData.value).then((res) => {
    console.log(res, '发送消息返回')

    if (res.state === 200) {
        ElMessage.success('消息发送成功')
    }

}).catch((error) => {
    ElMessage.error('API异常，消息发送失败！')
})

這裡是會去抓取 /src/api/index.js 中的函式

//发送端外通知（new_msg 消息通知）
sendMessage(data) {
    return post('notice/send-message', data)
},
  • 取得服務 url

window.location.host 是一个 JavaScript 属性，用于获取当前页面 URL 的主机部分（主机名和端口号）。

會返回一个字符串，格式为：

<主机名>:<端口号>

調用 http.js 的 post

使接使用

post('notice/push-info', data)
  • 範例
proxy.$api.sendMsgs(submitdata).then((res) => {
  console.log(res, '发送消息返回')
  res.state === 200 ? (ElMessage.success('消息发送成功'), clearData(), router.push('/home/pushmsg')) : ''
}).catch((error) => {
  ElMessage.error('API异常，消息发送失败！')
})

proxy 是 getCurrentInstance() 返回的實例中的核心屬性，主要用於解決上下文中對組件的操作需求：

proxy 還允許你訪問全局屬性，例如通過 app.config.globalProperties 註冊的屬性（例如 $api 或 $router）。

定位 proxy.$api.sendMsgs 的本體

確定 proxy.$api 的來源：

搜索 app.config.globalProperties.$api，找到全局 API 的註冊位置。 檢查其具體的模組或函數。

  • 封裝方法
//发送端外通知（消息通知）
sendMsgs(data) {
    return post('notice/push-info', data)
},
  • 實際調用
import { post, fetch } from '@/until/http.js'

http.js

一般在 src\api 資料夾下

import { post, fetch } from '@/until/http.js'
  • 最終調用的還是 axios
axios.post(url, params)
  • 使用 api post 調用方式

\ClientApp\src\api\htcommunity.js

import { post } from '@/api/http'
export default {
    // 新增修改統測活動
    jointEventUpsert: function(data) {
        return post('/joint/event/upsert', data)
    },
    // 新增修改統測活動分組
    jointEventGroupUpsert: function(data) {
        return post('/joint/event-group/upsert', data)
    },
  • 最後呼叫 jointEventUpsert() function

ClientApp\src\view\htcommunity\htMgtHome.vue

 try {
   // 新增/更新活動API
   this.$api.htcommunity.jointEventUpsert(dataEvent).then(
     async res => {
       if (res.errCode === "") {              
         if (res.jointEvent.id) {//如果成功新增/更新活動 新增/更新組別
  • 調用方式
 this.$api.htcommunity.jointEventUpsert(data)
  • 調用 api 的路徑
@/api/http 是 Vue 项目中用于路径别名的简写，具体含义如下：

含义
@：指向项目的根目录（通常是 src 文件夹）。
@/api/http：表示 src/api/http.js 文件。
  • https.js 部分內容
...
export function post(url, params, timeout) {
    //params['id_token'] = localStorage.getItem('id_token')
    let data = {}
    data.method = url
    data.params = params
    data.lang = localStorage.getItem('local')
    return new Promise((resolve, reject) => {
        if(timeout){
            axios.defaults.timeout = timeout // 设置超时时长
        }
        axios.post(url, params)
            .then(response => {
                if (response) {
                    resolve(response.data)
                }
            }, err => {
                reject(err)
            })
    })
}
⚠️ **GitHub.com Fallback** ⚠️