Promise介绍
同步代码与异步代码
安装并引入axios
npm install axios此时package.json里面就多了axios依赖
引入axios
获取数据
Axios GET参数构成：axios.get(url,{config{},…{}…})
-
url:
- 字符串：目标服务器的地址，如
https://api.example.com/resource。
- 字符串：目标服务器的地址，如
-
config (可选):
-
配置对象，用于设置请求的具体行为。常用的配置项包括：
-
params: URL 查询参数，将其序列化为查询字符串并附加到请求 URL。例如：
params: { userId: 1, sort: 'asc' } -
headers: 自定义请求头，例如 Authorization 头：
headers: { 'Authorization': 'Bearer YOUR_TOKEN' } -
timeout: 请求超时的时间，单位为毫秒。
timeout: 5000 // 5秒超时 -
responseType: 指定响应类型（如 'json', 'text', 'blob', 'arraybuffer', 'document'）。
-
withCredentials: 指定是否跨域请求时是否需要使用凭证（如 Cookies）。
-
validateStatus: 自定义请求状态码的成功范围。默认情况下，2xx 状态码会被视为成功。
-
// 以下是个获取url里数据的函数
const getStudent = async () => { // await用在函数里面要在函数前面加async
// 也可以用结构来承接axios返回数据
const x = await axios.get('http://geek.itheima.net/v1_0/channels')
// axios要配合await使用
console.log(x);
count.value = x.data.data.arrays // 把axios获取的数据赋值给前面的变量
}
调用该函数后就得到了url里面的数据
在 Vue 3 中，使用 Axios 进行数据请求通常是放在 onMounted 生命周期钩子中。这个钩子会在组件实例被挂载后立即调用，非常适合进行初始数据获取。如果是点按钮来获取并渲染，就不用放在OnMounted函数里
onMounted(() => {
// 在组件挂载后执行的代码
});
<script setup>
import { useStudentStore } from '@/store';
import { onMounted } from 'vue';
const StudentStore = useStudentStore()
// 在组件挂载完成后调用getStudent()，就是要放在onMounted(() => {<fun>})里
onMounted(() => {
StudentStore.getStudent()
})
</script>
<template>
<h1>这是son2</h1>
<ul>
<li v-for="(item, index) in StudentStore.prince" :key="index">{{ index + 1 }} {{ item }}</li>
</ul>
</template>发送数据
Axios POST 请求参数结构：axios.post(url, data,{config{},…{}…})
-
url:
- 字符串：目标服务器的地址，如
https://api.example.com/resource。
- 字符串：目标服务器的地址，如
-
data（传得较多）:
- 对象：将被作为请求体发送到服务器的数据。内容可以是任意数据类型（对象、数组、基本数据类型等），通常是 JSON 格式的对象。
示例：
{ name: 'Alice', age: 30 } -
config (可选):
- 配置对象，用于设置请求的具体行为。常用的配置项包括：
- headers: 自定义请求头。
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer TOKEN' } - timeout: 请求超时的时间，单位是毫秒。
timeout: 1000 // 一秒超时 - params: URL 查询参数，会自动拼接到 URL 中。
params: { userId: 1 } - responseType: 指定响应类型。
responseType: 'json' // 默认是 json - validateStatus: 自定义请求状态码的成功范围。默认情况下，2xx 状态码会被视为成功。
validateStatus: function (status) { return status >= 200 && status < 500; // 只接收 2xx 和 4xx 状态码 }
const postfeedback = async() => {
console.log(advice.value); // advice对象变量在函数外定义好，并用v-model与输入框绑定
// 发送post请求并获得响应
const resp = await axios.post('https://hmajax.itheima.net/api/feedback', advice.value)
alert(resp.data.message); // 后端发送的响应数据
}axios拦截器
token介绍：
在Vue 3中，使用axios拦截器可以帮助我们在请求发送之前或响应到达之后执行一些操作。这些操作可以包括设置请求头、处理错误、统一管理跳转等。
如何使用axios拦截器：
1. 请求拦截器：在请求发送之前执行，可以用来修改请求配置或添加额外的逻辑，例如添加token验证信息。
import axios from 'axios';
axios.interceptors.request.use(
config => {
// 在这里添加token或其他配置
const token = localStorage.getItem('token');
if (token) {
config.headers['Authorization'] = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error); //会捕获错误并返回一个拒绝的 Promise
}
);2. 响应拦截器：在响应到达之后执行，可以用来处理响应数据或进行错误处理。
axios.interceptors.response.use(
response => {
// 对响应数据进行处理
return response.data;
},
error => {
// 对响应错误进行处理
if (error.response && error.response.status === 401) {
// 处理401错误，例如跳转到登录页面
}
return Promise.reject(error);
}
);3. 移除拦截器：如果需要移除拦截器，可以使用`eject`方法。
const myInterceptor = axios.interceptors.request.use(...);
axios.interceptors.request.eject(myInterceptor);
4. 在Vue 3项目中设置axios实例：通常我们会创建一个axios实例，并在项目中全局使用。
// src/axios/index.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://your-api-url',
timeout: 1000,
});
// 添加拦截器
instance.interceptors.request.use(...);
instance.interceptors.response.use(...);
export default instance;
5. 在main.js中引入axios实例：
import { createApp } from 'vue';
import App from './App.vue';
import axios from './axios'; // 引入封装的axios实例
const app = createApp(App);
app.config.globalProperties.$axios = axios; // 将axios挂载到全局
app.mount('#app');
6. 在组件中使用：
import { ref } from 'vue';
export default {
setup() {
const data = ref(null);
const error = ref(null);
const fetchData = async () => {
try {
data.value = await this.$axios.get('/data');
} catch (err) {
error.value = err;
}
};
fetchData();
return { data, error };
}
}
通过上述步骤，你可以在Vue 3项目中灵活地使用axios拦截器来处理HTTP请求和响应。这样不仅可以简化代码，还可以提高项目的可维护性。
