前后端分离:WebAPI+Vue开发——远程数据请求axios
本文没有Vue语法内容(Vue中文文档),只记录本人开发中遇到的难点
远程请求采用axios(axios中文文档,注意:IE11以下不支持axios)
ajax、axios、fetch之间的详细区别以及优缺点(https://blog.csdn.net/twodogya/article/details/80223508)
Get请求:
axios.get('http://api.abc.com/api/user',{
param:{Id:132}
}).then(function(response){
console.log(response.data);
}).catch(function(error){
console.log(error);
Post请求:
axios.post('http://api.abc.com/api/user',{
name:'frank',
sex:'1'
}).then(function (response){
console.log(response.data)
}).catch(function(error){
console.log(error);
});
原始请求:
axios({
url:'http://api.abc.com/api/user',
method:'post',
responseType:'json',
data:{
name:'frank',
sex:'1'
}
}).then(function(response){
console.log(response.data);
}).catch(function(error){
console.log(error);
})
response的结构如下:
{
// 返回的数据
data: {},
// http状态码
status: 200,
//状态
statusText: 'OK',
// 返回结果的header头
headers: {},
//axios请求的配置内容
config: {}
}
全局默认值设置
axios.defaults.baseURL = 'http://api.abc.com';
设置之后,axios的远程请求,不用再具体到域名,直接用 url:'/api/user'即可,实际项目中建议把POST、GET方法进行封装,统一调用,如有更换其他远程请求方式的需求(如ajax)会很方便,封装如下:
//axios的Post方法封装
function POST(url, data, method) {
var tk = getCookie('token');
if (tk) {
axios({
url: url,
method: 'post',
data: data,
headers: { 'token': tk }
}).then(function (response) {
if (response.data.ret == -2)//没有访问权限
{
location.href = '/';
}
else if (response.data.ret == -1) {//程序错误
console.log(response.data.msg);
}
else {
method(response.data);
}
}).catch(function (error) {
console.log(error);
})
}
}
//axios的Get方法封装
function GET(url, data, method) {
var tk = getCookie('token');
if (tk) {
axios({
url: url,
method: 'get',
data: data,
headers: { 'token': tk }
}).then(function (response) {
if (response.data.ret == -2)//没有访问权限
{
location.href = '/';
}
else if (response.data.ret == -1) {//程序错误
console.log(response.data.msg);
}
else {
method(response.data);
}
}).catch(function (error) {
console.log(error);
})
}
}
GET和POST方法也可以封装到一个里边,method是一个回调函数,处理得到的数据;getCookie是自己写的cookie获取方法,此处的token类似sessionid,放在了请求头中,作为一个用户身份识别标识使用,用户身份识别后续再写;response.data.ret和response.msg是API接口中自定义的请求状态和提示信息