vue-cli 中使用 Axios

安装 axios：

1

npm install  axios --save-dev

接着在src目录下创建一个http.js脚本中，导入axios并通过create方法实例化一个http请求对象，这样我们才能在组件中使用。

src/http.js，代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import axios from "axios"; // 要导入安装的包，则直接填写包名即可。不需要使用路径
 
// 实例化
const $http = axios.create({
      baseURL: 'http://wthrcdn.etouch.cn/', // 请求的公共路径,一般填写服务端的api地址
      timeout: 1000,                           // 最大请求超时时间，请求超过这个时间则报错
      headers: {'X-Custom-Header': 'foobar'}   // 预定义请求头，一般工作中这里填写隐藏了客户端身份的字段
});
 
export default $http;

在src/components目录下构建Forecast组件，使用axios模块：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<template>
  <div>
    <input type="text" v-model="city">
    <button @click="get_weather">获取天气</button>
    <table v-if="weather_list.length>1">
      <tr>
        <th>日期</th>
        <th>天气</th>
        <th>温度</th>
        <th>风向</th>
      </tr>
      <tr v-for="weather in weather_list">
        <td>{{ weather.date }}</td>
        <td>{{ weather.type }}</td>
        <td>{{ weather.low }}~{{ weather.high }}</td>
        <td>{{ weather.fengxiang }}{{ showFengLi(weather.fengli) }}</td>
      </tr>
    </table>
  </div>
</template>
 
<script>
import $http from "../http";
 
export default {
  name: "Forecast",
  data() {
    return {
      city: "北京",
      weather_list: [],
    }
  },
  created() {
    // 任意一个组件中都可以获取查询参数
    console.log(this.$route.query); // 获取所有的查询参数
    if (this.$route.query.city) {
      this.city = this.$route.query.city
    }
 
  },
  methods: {
    get_weather() {
      // 发送http请求获取天气
      $http.get("http://wthrcdn.etouch.cn/weather_mini", {
        params: {
          city: this.city,
        }
      }).then(response => {
        console.log(response.data.data.forecast);
        this.weather_list = response.data.data.forecast;
      }).catch(error => {
        console.log(error);
      })
    },
    showFengLi(content) {
      return content.replaceAll("<![CDATA[", "").replaceAll("]]>", "");
    },
  }
}
</script>
 
<style scoped>
table {
  width: 800px;
  border-collapse: collapse;
}
 
td, th {
  border: 1px solid red;
}
</style>

在Home.Vue更新为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <div class="home">
    <!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <Nav></Nav>
    <Forecast></Forecast>
 
  </div>
</template>
 
<script>
// @ is an alias to /src
import Nav from '@/components/Nav.vue'
import Forecast from '@/components/Forecast.vue'
 
export default {
  name: 'Home',
  components: {
    Nav,
    Forecast
  }
}
</script>