VUE网络请求中的axios

1. 安装依赖

npm install axios --save

1. 引入到 main.js 中

import axios from 'axios'

1. 加载到 Vue 的原型上，让整个 Vue 可以使用

Vue.prototype.$axios = axios

1. 有可能跨域，这时就要设置代理
   　　在 config 下的 index.js 文件中添加

proxyTable: {
'/api':{
target:'跨域地址',
changeOrigin:true,
pathRewrite:{
'^/api':''
}
},
}

在 config 下的dev.env.js 文件中添加

API_HOST:'"/api"'

在 config 下的 prod.env.js 文件中添加

API_HOST:'"线上的地址"'

这样请求时的 url 就是：

url: process.env.API_HOST + ''

1. 有时修改请求过来的数据，改变状态不管用
   在改变状态之前加上

this.$forceUpdate();

1. get 请求

this.$axios({
method: 'get',
url: process.env.API_HOST + '',
params:{},
})
.then(data => {
console.log(data);
}).catch(err => {
console.log(err)
});

1. post请求

import Qs from 'qs';

this.$axios({
method: 'post',
url: process.env.API_HOST + '',
data: {},
transformRequest: [(data) => {
data = Qs.stringify(data);
return data;
}],
}).then(data => {});

1. 如果传值规定为JSON，那么将

transformRequest: [(data) => {
data = Qs.stringify(data);
return data;
}],

改为：

dateType: JSON,

1. 跨域请求时，是否需要使用凭证（传固定的cookie），在 main.js 中添加

axios.defaults.withCredentials = true;

1. 在 main.js 中配置拦截：

// 添加请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use((response) => {
// 对响应数据做点什么
return response;
}, (error) => {
// 对响应错误做点什么
return Promise.reject(error);
});

1. put 请求

this.$axios({
method: 'put',
url: process.env.API_HOST + '',
data: {},
dateType: JSON,// 根据后台要求的数据类型进行传值
}).then(data => {
});

1. delete 请求

this.$axios({
method: 'delete',
url: process.env.API_HOST + '',
params:{},
}).then(data => {
console.log(data);
}).catch(err => {
console.log(err)
});