10、Vue2项目使用axios发送请求数据
一、axios完成Ajax请求,以下为具体介绍1、先在项目中安装axios,安装命令如下cnpm install axios -S2、axios引入,为了避免麻烦,在main.js文件中全局引入import axios from 'axios'Vue.prototype.$axios = axios;//写成原型属性,在main.js中添加这两行代码之后,就能直接在组件中使用axios了3、使用方
·
一、axios完成Ajax请求,以下为具体介绍
1、先在项目中安装axios,安装命令如下
cnpm install axios -S
2、axios引入,为了避免麻烦,在main.js文件中全局引入
import axios from 'axios'
Vue.prototype.$axios = axios; //写成原型属性,
在main.js中添加这两行代码之后,就能直接在组件中使用axios了
3、使用方式
this.$axios({
url:"/id/daSysloadForecast/v1/getDaSysloadForecast96Data",//请求的后台接口
method:"get",//get请求方式
params:this.data //传给后台的参数
}).then(response=>{
//请求成功
}).catch(error=>{
//请求失败
});
4、开发环境下的实际应用
(1)在开发环境中,考虑到请求的接口可能存在跨域问题,需要配置代理
在vue-cli的config文件下面的index.js里有一个参数叫proxyTable,配置proxyTable的时候本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。以下为具体的配置代码。
proxyTable: {
timeout: 1920000,
target: 'http://代理目标:端口号/',//设置设置代理目标和端口号 别忘了加http
changeOrigin: true
},
(2)处理请求的参数格式转换问题
在vue2中使用axios,我们请求的参数仍为json类型,是并没有序列化的。我们需要使用querystring解决该问题
安装qs插件 命令如下
npm install qs
安装完成后引入 qs
import qs from ‘qs’
传入参数时转换格式
qs.stringify(data)
页面组件中请求具体代码如下
将数组ids:[“1”,“2”,“3”,“4”]格式转换成json格式
this.$axios({
url:"/id/informationMonitor/v1/verify",//请求的后台接口
method:"get",//get请求方式
params:{ids:["1","2","3","4"]} //ids传给后台的参数
//参数序列化
paramsSerializer:function(params){
return qs.stringify(params,{arrayFormat:'repeat'})
}
}).then(response=>{
console.log(response)
}).catch(error=> {
console.log(error);
});
转换结果
更多推荐
已为社区贡献2条内容
所有评论(0)