10、Vue2项目使用axios发送请求数据

一、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);
});

转换结果