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})

三、配置代理（實現(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': ''
                }    
            }
        }
    }
}