1.axios介绍:
axios是一个基于Promise用于浏览器和node.js的HTTP客户端。
向axios传递相关配置来创建请求:
axios({
methods:'...', //若没有指定,默认为GET方法
url:'...', //请求的服务器url
data{
......, //请求主体被发送的数据
......,
}
baseURL:'...', //自动加到url前面,除非url是一个绝对URL
param:{
参数名:数据,
......, //即将与请求一起发送的URL参数
}
timeout:..., //请求超过时间请求将被中断
transformRequest:[function(data){
//对data进行转换处理
return data; //允许在向服务器发送前,修改请求,只能用PUT,POST,PATCH请求方法请求数据
}],
transformResponse:[function(data){
//对data进行转换处理
return data; //在传递给then,catch前,允许修改响应数据
}],
//还有很多,不止以上这些相关配置
})
某个请求的响应包括以下信息:
{
//由服务器提供的响应数据
data:{},
//来自服务器响应的HTTP响应码
status:200,
//来自服务器响应的HTTP状态信息
statusText:'ok',
//服务器响应的头
headers:{},
//为请求提供的配置信息
config:{}
}
//以上为请求的响应结构
接收响应则在then中:
axios.get("地址")
.then(function(response){
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
}.catch(function(err){...});
2.axios+Vue(从本地应用变成了网络应用,一部分数据源从网络上获取)
基本语法(这里只写出了get和post方法):
axios.get(地址?查询字符串).then(function(response){},function(err){})
//地址?查询字符串这里可以写成地址?key=value&key2=value2
axios.post(地址,参数对象).then(function(response){},function(err){})
//地址,参数对象这里可以写成地址,{key:value,key2:value2}
//也可以写成下面这样子
axios.请求方法名("...").then(function(response){
//代码
}).catch(function(err){...});
也可以在项目中通过<script>标签进行引入。
也可以通过以下命令下载进行引用:
$ npm install axios
若需要在vue中使用axios,则在vue实例中的方法选项中添加函数:
methods:{
函数名:function(){
axios.get("...").then(...)
}
}
ps:回调函数中使用this关键字取得该组件初始化的形参时,一定要用 var 变量名=this 取值,不然取得的值并不是该组件中初始化的形参,而是在回调函数中所定义的值。
也可以使用箭头函数来代替普通函数。