vue axios数据请求及vue中使用axios的方法
投稿：mrr
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
--------------------------------------------------------------------------------
•从浏览器中创建 XMLHttpRequest
•从 node.js 发出 http 请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持防止 CSRF/XSRF
在vue中数据请求需要先安装axios
npm i --save axios
我们在使用请求数据的页面导入axios
import axios from "axios"
然后在methods里面写数据的请求
methods:{
getInfo(){
let url = "url"
axios.get(url).then((res)=>{
//console.log(res)
this.list1 = res
})
}
在生命周期调用一下，一般我们数据请求使用的生命周期是Mounted
mounted() {
this.getInfo()
}
这样我们就完成了axios的get方法请求
然后我们简答的说一说post请求，post请求与get请求其实变得不多
postInfo() {
let url = "..."
var params = new URLSearchParams();
params.append('key', index);
axios.post(url, params).then((res) => {
console.log(res)
})
}
这样我们就可以成功的使用post方法请求数据了
补充：下面看下vue中使用axios
1.安装axios
npm：
$ npm install axios -S
cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.配置axios
在项目中新建api/index.js文件，用以配置axios
api/index.js
import axios from 'axios';
let http = axios.create({
baseURL: 'http://localhost:8080/',
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
transformRequest: [function (data) {
let newData = '';
for (let k in data) {
if (data.hasOwnProperty(k) === true) {
newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
}
}
return newData;
}]
});
function apiAxios(method, url, params, response) {
http({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
}).then(function (res) {
response(res);
}).catch(function (err) {
response(err);
})
}
export default {
get: function (url, params, response) {
return apiAxios('GET', url, params, response)
},
post: function (url, params, response) {
return apiAxios('POST', url, params, response)
},
put: function (url, params, response) {
return apiAxios('PUT', url, params, response)
},
delete: function (url, params, response) {
return apiAxios('DELETE', url, params, response)
}
}
这里的配置了POST、GET、PUT、DELETE方法。并且自动将JSON格式数据转为URL拼接的方式
同时配置了跨域，不需要的话将withCredentials设置为false即可
并且设置了默认头部地址为：http://localhost:8080/，这样调用的时候只需写访问方法即可
3.使用axios
注：PUT请求默认会发送两次请求，第一次预检请求不含参数，所以后端不能对PUT请求地址做参数限制
首先在main.js中引入方法
import Api from './api/index.js'; Vue.prototype.$api = Api;
然后在需要的地方调用即可
this.$api.post('user/login.do(地址)', {
"参数名": "参数值"
}, response => {
if (response.status >= 200 && response.status < 300) {
console.log(response.data);\\请求成功，response为成功信息参数
} else {
console.log(response.message);\\请求失败，response为失败信息
}
});