# chapter10

**Repository Path**: henryong/chapter10

## Basic Information

- **Project Name**: chapter10
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-29
- **Last Updated**: 2025-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 学习 Axios 在 Vue 中的使用

目标：学会Axios在工程中的使用和配置。

## 目录

- [学习 Axios 在 Vue 中的使用](#学习-axios-在-vue-中的使用)
- [目录](#目录)
- [项目资源](#项目资源)
- [项目概述](#项目概述)
- [安装 Axios](#安装-axios)
- [配置 Axios](#配置-axios)
  - [解释](#解释)
- [配置代理解决跨域问题](#配置代理解决跨域问题)
- [在 Vue 组件中使用 Axios](#在-vue-组件中使用-axios)
  - [示例代码](#示例代码)
- [在 `App.vue`中测试以上API](#在-appvue中测试以上api)
- [编写 `Weather.vue`组件实现预期的界面效果](#编写-weathervue组件实现预期的界面效果)
  - [Template 部分](#template-部分)
  - [Script 部分](#script-部分)
  - [Style 部分](#style-部分)
- [修改 `App.vue`组件](#修改-appvue组件)
- [总结](#总结)

## 项目资源

- [起始项目](/resources/chap09-starter.zip)
- [城市列表文件](/resources/mocities.json)
- [墨迹天气接口产品使用指南](/resources/墨迹天气接口产品使用指南.pdf)

## 项目概述

本项目是一个简单的天气应用，展示了如何在 Vue 中使用 Axios 进行 HTTP 请求。项目结构如下：

```plaintext
moji-weather/
├── public/
│   ├── favicon.ico
├── src/
│   ├── assets/
│   │   ├── logo.svg
│   │   ├── main.css
│   │   ├── mocities.json
│   ├── components/
│   │   ├── Weather.vue
│   ├── api/
│   │   ├── moji/
│   │   │   ├── aliweather.js
│   ├── utils/
│   │   ├── alirequest.js
│   ├── App.vue
│   ├── main.js
├── .env.development
├── .gitignore
├── README.md
├── vite.config.js
├── package.json
├── package-lock.json
└── 墨迹天气接口产品使用指南.pdf
```

## 安装 Axios

首先，确保你的项目已经初始化并且安装了 Vue。然后，在项目根目录下运行以下命令来安装 Axios：

```bash
npm install axios
```

## 配置 Axios

在项目中，我们创建了一个 Axios 实例来进行 HTTP 请求。这个实例位于 `src/utils/alirequest.js` 文件中。以下是该文件的内容：

```javascript
import axios from 'axios'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: import.meta.env.VITE_APP_BASE_API,
  // 超时
  timeout: 10000
})

// request拦截器
service.interceptors.request.use(config => {
  // 在发送请求之前做某事
  config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
  config.headers['Authorization'] = 'APPCODE fb571124c2f7449cb5afdf73fe9f1b92'
  return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 二进制数据则直接返回

    if (code === 500) {
      return Promise.reject(new Error(msg))
    } else if (code === 601) {
      return Promise.reject(new Error(msg))
    } else if (code !== 200) {
      return Promise.reject('error')
    } else {
      return  Promise.resolve(res.data)
    }
  },
  error => {
    console.log('err' + error)
    let { message } = error;
    if (message == "Network Error") {
      message = "后端接口连接异常";
    } else if (message.includes("timeout")) {
      message = "系统接口请求超时";
    } else if (message.includes("Request failed with status code")) {
      message = "系统接口" + message.substr(message.length - 3) + "异常";
    }
    return Promise.reject(error)
  }
)

export default service
```

### 解释

- **baseURL**: 设置了所有请求的基础 URL，通过环境变量 `VITE_APP_BASE_API` 获取。
- **timeout**: 设置了请求的超时时间，为 10 秒。
- **request 拦截器**: 在发送请求前修改请求头，添加 `Content-Type` 和 `Authorization`。
- **response 拦截器**: 对响应进行处理，根据状态码决定是否解析数据或抛出错误。
- **.env.development文件内容**

```sh
# 页面标题
VITE_APP_TITLE = 天气查询测试

# 开发环境配置
VITE_APP_ENV = 'development'

# 天气查询测试/开发环境
VITE_APP_BASE_API = '/dev-api'
```

## 配置代理解决跨域问题

为了在开发环境中解决跨域问题，我们在 `vite.config.js` 文件中配置了代理。以下是具体步骤：

1. 打开 `vite.config.js` 文件。
2. 在 `export default` 函数中找到 `server` 配置项。
3. 添加或修改 `proxy` 配置，如下所示：

```javascript
server: {
  port: 801,
  host: true,
  open: true,
  proxy: {
    '/dev-api': {
      target: 'http://aliv18.data.moji.com/',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/dev-api/, '')
    }
  }
},
```

- **port**: 设置开发服务器的端口号为 801。
- **host**: 允许外部访问。
- **open**: 自动打开浏览器。
- **proxy**: 配置代理，将 `/dev-api` 路径下的请求转发到 `http://aliv18.data.moji.com/`，并重写路径去掉 `/dev-api` 前缀。

## 在 Vue 组件中使用 Axios

在 Vue 组件中，我们可以导入并使用 `src/utils/alirequest.js` 中配置好的 Axios 实例。例如，在 `src/api/moji/aliweather.js` 文件中定义了多个查询函数，这些函数可以在 Vue 组件中调用。

### 示例代码

以下是 `src/api/moji/aliweather.js` 文件的部分内容：

```javascript
import request from "@/utils/alirequest";

// 空气质量查询
export function queryAirQuality(query) {
  const token = {token: "8b36edf8e3444047812be3a59d27bab9"};
  return request({
    url: "/whapi/json/alicityweather/aqi",
    method: "post",
    params: {...query, ...token },
  });
}

// 生活指数查询
export function queryLifeIndex(query) {
  const token = {token: "5944a84ec4a071359cc4f6928b797f91"};
  return request({
    url: "/whapi/json/alicityweather/index",
    method: "post",
    params: {...query, ...token },
  });
}

// 天气预报24小时查询
export function queryWeatherForecast24(query) {
  const token = {token: "008d2ad9197090c5dddc76f583616606"};
  return request({
    url: "/whapi/json/alicityweather/forecast24hours",
    method: "post",
    params: {...query, ...token },
  });
}

// 实时天气查询
export function queryRealtime(query) {
  const token = {token: "50b53ff8dd7d9fa320d3d3ca32cf8ed1"};
  return request({
    url: "/whapi/json/alicityweather/condition",
    method: "post",
    params: {...query, ...token },
  });
}

// 未来15日天气预报查询
export function queryWeatherForecast15(query) {
  const token = {token: "f9f212e1996e79e0e602b08ea297ffb0"};
  return request({
    url: "/whapi/json/alicityweather/forecast15days",
    method: "post",
    params: {...query, ...token },
  });
}
```

## 在 `App.vue`中测试以上API

在 `src/App.vue` 文件中，我们可以导入并使用这些查询函数来获取天气数据。例如：

```vue
<script setup>
import Weather from '@/components/Weather.vue';
import { queryAirQuality, queryLifeIndex, queryWeatherForecast24, queryRealtime, queryWeatherForecast15 } from '@/api/moji/aliweather.js';

async function fetchWeatherData() {
  try {
    const airQuality = await queryAirQuality({ city: 'Beijing' });
    const lifeIndex = await queryLifeIndex({ city: 'Beijing' });
    const weatherForecast24 = await queryWeatherForecast24({ city: 'Beijing' });
    const realtime = await queryRealtime({ city: 'Beijing' });
    const weatherForecast15 = await queryWeatherForecast15({ city: 'Beijing' });

    console.log('Air Quality:', airQuality);
    console.log('Life Index:', lifeIndex);
    console.log('Weather Forecast 24 Hours:', weatherForecast24);
    console.log('Realtime Weather:', realtime);
    console.log('Weather Forecast 15 Days:', weatherForecast15);
  } catch (error) {
    console.error('Error fetching weather data:', error);
  }
}

fetchWeatherData();
</script>

<template>
  <Weather/>
</template>

<style scoped>
</style>
```

- **错误处理**: 使用 `try-catch` 块来捕获和处理可能的错误。

## 编写 `Weather.vue`组件实现预期的界面效果

### Template 部分

以下是 `Weather.vue` 的 `template` 部分：

```vue
<template>
  <el-container class="container">
    <el-header>
      <el-input placeholder="请输入" class="input" v-model="city">
        <template #prepend>城市名：</template>
      </el-input>
    </el-header>
    <el-main class="main">
      <div class="today">
        今天：
        <span>{{ todayData.condition ?? plc }} {{ todayData.temp ?? plc }}°</span>
        <span style="margin-left:20px">风力 {{ todayData.windlevel ?? plc }}</span>
        <span style="margin-left:100px">{{ todayData.date }}</span>
      </div>
      <div class="real">
        <span class="temp">{{ realtime.temp ?? plc }}°</span>
        <span class="realInfo">{{ realtime.tips ?? plc }}</span>
        <span class="realInfo" style="margin-left:20px">{{ realtime.windDir ?? plc }}</span>
        <span class="realInfo" style="margin-left:20px">{{ realtime.windLevel ?? plc }}级</span>
      </div>
      <div class="real">
        <span class="realInfo">空气质量：{{ quality ?? plc }}°</span>
        <span class="realInfo" style="margin-left:20px">湿度：{{ realtime.humidity ?? plc }}</span>
      </div>
      <div class="future">
        <div class="header">15日天气预报</div>
        <el-table :data="futureData" style="margin-top:30px">
          <el-table-column prop="predictDate" label="日期"></el-table-column>
          <el-table-column prop="tempDay" label="温度"></el-table-column>
          <el-table-column prop="conditionDay" label="天气"></el-table-column>
          <el-table-column prop="windDirDay" label="风向"></el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>
```

### Script 部分

以下是 `Weather.vue` 的 `script` 部分：

```vue
<script setup>
import cities from '@/assets/mocities.json'
import { ref, watch, onMounted } from 'vue'
import { 
  queryWeatherForecast15, 
  queryRealtime, 
  queryAirQuality,
  queryWeatherForecast24 
} from '@/api/moji/aliweather' 

const city = ref("大连市")
const todayData = ref({})
const plc = "暂无数据"
const realtime = ref({})
const quality = ref('')
const futureData = ref([])

function getCityIdByName(name) {
  const city = cities.find(city => city.name === name);
  return city ? city.id : "2"; 
}

const GetWeatherForecast = (cityId) => {
  queryWeatherForecast15({cityId: cityId}).then(response => {  
    futureData.value = response.data.forecast
  });
  queryRealtime({cityId}).then(response => {  
    realtime.value = response.data.condition
  });
  queryAirQuality({cityId: cityId}).then(response => {  
    quality.value = response.data.aqi.value
  });
  queryWeatherForecast24({cityId: cityId}).then(response => {  
    todayData.value = response.data.hourly[0]
  });
}

onMounted(() => {
  GetWeatherForecast(getCityIdByName(city.value))
})

watch(city, () => {
  GetWeatherForecast(getCityIdByName(city.value))
})
</script>
```

### Style 部分

以下是 `Weather.vue` 的 `style` 部分：

```vue
<style scoped>
.container {
  background: linear-gradient(rgb(13, 104, 188), rgb(54, 131, 195));
}

.input {
  width: 300px;
  margin-top: 20px;
}

.today {
  font-size: 20px;
  color: white;
}

.temp {
  font-size: 79px;
  color: white;
}

.realInfo {
  color: white;
}

.future {
  margin-top: 40px;
}

.header {
  color: white;
  font-size: 27px;
}
</style>
```

## 修改 `App.vue`组件

```vue
<script setup>
import Weather from '@/components/Weather.vue';
console.log(import.meta.env)
</script>

<template>
 <Weather/>
</template>

<style scoped>
</style>
```

## 总结

通过本指南，你已经学习了如何在 Vue 项目中配置和使用 Axios 进行 HTTP 请求。你可以根据需要扩展这个项目，添加更多的功能和组件。