axios基本用法
Get
axios.get(地址?key1=val1&key2=val2).then(function(response){},function(err){})
Post
axios.post(地址,{key1:val1,key2:val2}).then(function(response),function(err){})
axios基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<input type="button" value ="get请求" class="get">
<input type="button" value ="post请求" class="post">
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
* 接口随机笑话
*/
document.querySelector(".get").onclick=function(){
axios.get("https://autumnfish.cn/api/joke/list?num=1")
.then(function(response){
console.log(response);
},function(err){
console.log(err);
});
}
/*
* 接口用户注册
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"Ezerbel"})
.then(function(response){
console.log(response);
},function(err){
console.log(err);
})
}
</script>
</body>
</html>
axios 结合vue
在axios中this会发生变化,所以不能直接在axios内部:使用this获取vue实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<input type="button" @click="getJoke" value="获取笑话">
<p>
{{joke}}
</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
joke:"好笑的笑话",
},
methods:{
getJoke:function(){
// 在axios中this会发生变化,所以不能直接在axios内部:使用this获取vue实例
var that = this;
axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
function(response){
console.log(response);
that.joke=response.data.jokes[0];
// console.log(that.joke);
},
function(err){
console.log(err);
}
)
}
}
})
</script>
</body>
</html>
axios、vue、和风API
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="app">
<input type="button" @click="getLocationID" value="获取城市ID">
<input type="text" v-model="cityName" @keyup.enter="getLocationID" placeholder="输入城市名···">
<p>
{{locationID}}
</p>
<hr/>
<input type="button" @click="getWeather" value="获取天气">
<p>
{{weatherForecast}}
</p>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
axios.defaults.crossDomain=true
const app = new Vue({
el:"#app",
data:{
weatherForecast:"天气信息",
key:"a5108355b8df4ed984e8797c6e5f1079",
locationID:"101120504",
cityName:""
},
methods:{
getLocationID:function(){
var that = this;
var key = this.key;
var cityName = this.cityName;
axios.get(`https://geoapi.heweather.net/v2/city/lookup?location=${cityName}&key=${key}`).then(
function(response){
// console.log(response);
that.locationID = response.data.location[0].id;
that.getWeather();
},
function(err){
console.log(err);
}
)
},
getWeather:function(){
// 在axios中this会发生变化,所以不能直接在axios内部:使用this获取vue实例
var that = this;
var key = this.key;
var locationID = this.locationID;
axios.get(`https://devapi.heweather.net/v7/weather/now?location=${locationID}&key=${key}`).then(
function(response){
console.log(response);
console.log("key == " + key);
that.weatherForecast=response.data.now;
},
function(err){
console.log(err);
}
)
}
}
})
</script>
</body>
</html>