vue项目中axios配置（代理配置）

一、引入axios包

npm install sxios --save

二、建立axios文件夹

        在src根目录下新建api文件夹

                在api文件夹下新建ajax.js和index.js文件

                ajax.js用于配置通用的axios接口方法。

                index.js 用于开发从接口获取数据方法。

ajax.js

/*
ajax请求函数模块
返回值： promise对象（异步返回的数据是：response.data）
*/
import axios form 'axios'
export default function ajax(url,data = {}, type = 'GET'){
    return new Promise(function(resolve, reject) {
        //异步执行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
            }
            // 发送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': ''
                }    
            }
        }
    }
}