1.在/src/下創建一個js文件 AxiosAsk.js

import Vue from 'vue' import axios from 'axios' var vm = ''; Vue.prototype.thisVm = function(_this) {vm = _this; } const APIASK = (url, type, data) => {let hostUrl = JSON.parse(localStorage.LMUrl).hostUrl;let ax = {method: type,url: hostUrl + url,headers: {"token": data.token},data: {},timeout: 15000}if (type == 'post') {ax.data = data;} else if (type == 'get') {ax.params = data;}let res = axios(ax).then((data) => {//自定義模塊if (data.status == 200) {if (data.data.code == 400) {vm.$message.error(data.data.msg);} else if (data.data.code == 402) {vm.$router.push({path: '/'})}} else {vm.$message.error('服務器錯誤');}//自定義模塊 ENDreturn data.data}).catch((error) => {vm.$message.error('網絡請求超時');return 'NetworkError';})return res }export default {APIASK }

2.App.vue

created() {this.thisVm(this);}

3.vue頁面調用

//頁面引入封裝接口文件 import $http from '../AxiosAsk'//調用封裝接口 let data = {//傳給接口的數據 token: this.token }; let res = $http.APIASK('/login', 'post', data); Promise.resolve(res).then(data => {if (data.code == 0) {//接口數據} }) 《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue项目-封装API接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。