vue項(xiàng)目中axios配置方式(代理配置)
一、引入axios包
npm install axios --save
二、建立axios文件夾
在src根目錄下新建api文件夾
在api文件夾下新建ajax.js和index.js文件
- ajax.js 用于配置通用的axios接口方法。
- index.js 用于開發(fā)從接口獲取數(shù)據(jù)方法。
ajax.js
/* ajax請(qǐng)求函數(shù)模塊 返回值: promise對(duì)象(異步返回的數(shù)據(jù)是:response.data) */ import axios form 'axios' export default function ajax(url,data = {}, type = 'GET'){ return new Promise(function(resolve, reject) { //異步執(zhí)行ajax請(qǐng)求 let promise if(type === 'GET'){ let dataStr = '' // 數(shù)據(jù)拼接字符串 Object.key(data).forEach(key => { dataStr += key + '=' data[key] + '&' }) if(dataStr != ''){ dataStr = dataStr.substring(0,dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 發(fā)送get請(qǐng)求 promise = axios.get(url) } else { promise = axios.post(url,data) } promise.then(function(response) { //成功了調(diào)用resolve() resolve(response.data) }).catch(function(error) { //失敗了調(diào)用reject() reject(error) }) }) }
index.js
/* 包含n個(gè)接口請(qǐng)求函數(shù)的模塊 函數(shù)的返回值: promise對(duì)象 */ import ajax from './ajax.js' // 無參數(shù) export const getAddress = () => ajax(`/api/NETworkPlatform/GetTotalData`) // 有參數(shù) export const getAddress = (transid) => ajax(`/api/NETworkPlatform/GetTotalData`,{transid})
三、配置代理(實(shí)現(xiàn)跨域)
在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': '' } } } } }
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2和Vue3的nextTick實(shí)現(xiàn)原理
Vue 中的數(shù)據(jù)綁定和模板渲染都是異步的,那么如何在更新完成后執(zhí)行回調(diào)函數(shù)呢?這就需要用到 Vue 的 nextTick 方法了,本文詳細(xì)介紹了Vue2和Vue3的nextTick實(shí)現(xiàn)原理,感興趣的同學(xué)可以參考一下2023-04-04uniapp前端支付篇之微信、抖音、快手、h5四個(gè)平臺(tái)支付功能
支付功能在我們?nèi)粘i_發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp前端支付篇之微信、抖音、快手、h5四個(gè)平臺(tái)支付功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析
本篇文章主要介紹了淺談Vuejs中nextTick()異步更新隊(duì)列源碼解析,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12vue-router3.0版本中 router.push 不能刷新頁面的問題
這篇文章主要介紹了vue-router3.0版本中 router.push 不能刷新頁面的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64
這篇文章主要介紹了vue實(shí)現(xiàn)將圖像文件轉(zhuǎn)換為base64,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-02-02使用provide/inject實(shí)現(xiàn)跨組件通信的方法
在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時(shí)的一個(gè)常見需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實(shí)現(xiàn)跨組件通信,并通過示例代碼一步步進(jìn)行說明,需要的朋友可以參考下2024-03-03uniapp開發(fā)打包成H5部署到服務(wù)器的詳細(xì)步驟
前端使用uniapp開發(fā)項(xiàng)目完成后,需要將頁面打包,生成H5的靜態(tài)文件,部署在服務(wù)器上這樣通過服務(wù)器鏈接地址,直接可以在手機(jī)上點(diǎn)開來訪問,下面小編給大家講解uniapp開發(fā)打包成H5部署到服務(wù)器的步驟,感興趣的朋友一起看看吧2022-11-11