Vue3中使用axios
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.jsimport 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请求和响应。这样不仅可以简化代码，还可以提高项目的可维护性。