vue3+vite+axios 配置連接後端調用接口的實現方法
在vite.config.ts
文件中添加以下配置
export default defineConfig({ plugins: [vue()], optimizeDeps: { include: ['axios'], }, build: { target: 'modules', outDir: 'dist', assetsDir: 'assets', minify: 'terser' // 混淆器 }, server: { cors: true, open: true, proxy: { '/api': { target: 'http://xxx.xxx.xxx', //代理接口 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })
在本地項目中新建一個文件夾api
文件夾中編寫以下文件
1.配置axios
(axios.js
)
import axios from "axios" const instance = axios.create({ baseURL: "/api", timeout: 5000, }); // 添加請求攔截器 instance.interceptors.request.use( (config) => { // 在發送請求之前做些什麼 config.headers["Content-type"] = "application/json"; return config; }, (error) => { // 對請求錯誤做些什麼 return Promise.reject(error); } ); // 添加響應攔截器 instance.interceptors.response.use( (response) => { // 對響應數據做點什麼 // 隱藏加載圖 // 獲取code const res = response.data; // 返回成功 if (res == 200) { return res; } // token 異常 if (res === 508 || res === 512 || res === 514) { // 登出 清除token緩存 } return response; }, (error) => { // 對響應錯誤做點什麼 return Promise.reject(error); } ); export default instance;
2.配置請求(request.js
)
import instance from "./axios" const axios = ({ method, url, data, config }) => { method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data, {...config}) } else if (method == 'get') { return instance.get(url, { params: data, ...config }) } else if (method == 'delete') { return instance.delete(url, { params: data, ...config }, ) } else if (method == 'put') { return instance.put(url, data,{...config}) } else { console.error('未知的method' + method) return false } } export default axios
3.配置端口
編寫具體的請求,建議按照項目具體情況分文件編寫
import axios from "./request" //請求示例 //get export const mokeGet = (data) => { return axios({ url: "/getTest", method: "get", data, config: { headers: { 'Request-Type': 'wechat' }, timeout: 3000 } }) } post export const mokePost = (data) => { return axios({ url: "/postTest", method: "post", data, config: { headers: { 'Request-Type': 'wechat' }, timeout: 3000 } }) }
到此這篇關於vue3+vite+axios 配置連接後端調用接口的文章就介紹到這瞭,更多相關vue3+vite+axios內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 如何使用TS對axios的進行簡單封裝
- vue中axios封裝使用的完整教程
- Vue項目中封裝axios的方法
- web項目開發中2個Token原因解析及示例代碼
- vue如何封裝Axios的get、post請求