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>