Vue3中使用axios

Promise介绍

同步代码与异步代码

 

安装并引入axios

npm install axios

此时package.json里面就多了axios依赖

 引入axios

获取数据

Axios GET参数构成：axios.get(url,{config{},…{}…})

1. url:

   • 字符串：目标服务器的地址，如 https://api.example.com/resource。

2. 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{},…{}…})

1. url:

   • 字符串：目标服务器的地址，如 https://api.example.com/resource。

2. data（传得较多）:

   • 对象：将被作为请求体发送到服务器的数据。内容可以是任意数据类型（对象、数组、基本数据类型等），通常是 JSON 格式的对象。

   示例：

   { name: 'Alice', age: 30 }

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