vue項目中axios配置方式(代理配置)
更新時間:2024年07月26日 10:13:49 作者:土豆丶楊
這篇文章主要介紹了vue項目中axios配置方式(代理配置),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、引入axios包
npm install axios --save
二、建立axios文件夾
在src根目錄下新建api文件夾
在api文件夾下新建ajax.js和index.js文件
- ajax.js 用于配置通用的axios接口方法。
- index.js 用于開發(fā)從接口獲取數據方法。
ajax.js
/* ajax請求函數模塊 返回值: promise對象(異步返回的數據是:response.data) */ import axios form 'axios' export default function ajax(url,data = {}, type = 'GET'){ return new Promise(function(resolve, reject) { //異步執(zhí)行ajax請求 let promise if(type === 'GET'){ let dataStr = '' // 數據拼接字符串 Object.key(data).forEach(key => { dataStr += key + '=' data[key] + '&' }) if(dataStr != ''){ dataStr = dataStr.substring(0,dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 發(fā)送get請求 promise = axios.get(url) } else { promise = axios.post(url,data) } promise.then(function(response) { //成功了調用resolve() resolve(response.data) }).catch(function(error) { //失敗了調用reject() reject(error) }) }) }
index.js
/* 包含n個接口請求函數的模塊 函數的返回值: promise對象 */ import ajax from './ajax.js' // 無參數 export const getAddress = () => ajax(`/api/NETworkPlatform/GetTotalData`) // 有參數 export const getAddress = (transid) => ajax(`/api/NETworkPlatform/GetTotalData`,{transid})
三、配置代理(實現跨域)
在vue.config.js中
module.exports = { devServer: { port: 8080, host: 'localhost', open: true, https: false, proxy: { 'api': { target: 'https://localhost:44384', changeOrigin: true, ws: false, pathRewrite: { '^/apis': '' } } } } }
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
uniapp前端支付篇之微信、抖音、快手、h5四個平臺支付功能
支付功能在我們日常開發(fā)中經常會遇到,下面這篇文章主要給大家介紹了關于uniapp前端支付篇之微信、抖音、快手、h5四個平臺支付功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05