vue项目中axios配置方式(代理配置)
作者：土豆丶杨
这篇文章主要介绍了vue项目中axios配置方式(代理配置),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
一、引入axios包
npm install axios --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': ''
}
}
}
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。