vue使用axios异步请求

vue中, 通常使用axios来调用http异步请求, axios调用的返回值必须是json格式

在vue中调用axios的get或其他调用时, this的绑定值会变, 你可以使用箭头函数或把this保存下来

下面, 是一个调用天知道接口的实例

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入官网提供的 axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<h2>vuejs配合axios查询天气实例</h2>
<div class="wrap" id="app">
  <div class="search_form">
	<div class="form_group">
	  <input
		type="text"
		v-model="city" @keyup.enter="searchWeather()"
		class="input_txt"
		placeholder="请输入查询地"
	  />
	  <button class="input_sub" @click="searchWeather()">
		搜 索
	  </button>
	</div>
	<div class="hotkey">
	  <a href="javascript:;"  @click="changeCith('北京')">北京</a>
	  <a href="javascript:;"  @click="changeCith('海口')">海口</a>
	  <a href="javascript:;"  @click="changeCith('广州')">广州</a>
	  <a href="javascript:;"  @click="changeCith('长沙')">长沙</a>
	</div>
  </div>
  <ul class="weather_list">
	<li v-for="item in weatherList">
	  <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
	  <div class="info_temp">
		<b>{{item.low}}</b>
		~
		<b>{{item.high}}</b>
	  </div>
	  <div class="info_date"><span>{{item.date}}</span></div>
	</li>
  </ul>
</div>
<!-- 主要的逻辑处理js -->
<script type="text/javascript">
	 var app = new Vue({
		 el:'#app',
		 data:{
			 city:'北京',
			 weatherList:[]
		 },
		 methods:{
			 searchWeather:function(){
				 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then((res)=>{
					 console.log(res.data.data.forecast);
					 this.weatherList=res.data.data.forecast
				 }).catch((err)=>{
					 console.log(err);
				 })
			 },
			 changeCith:function(city){
				 this.city=city;
				 this.searchWeather();
			 }
		 }
	 })
</script>