个人技术博客一axios的使用总结

222100418张星航 2024-06-01 00:25:00

这个作业属于哪个课程	软件工程实践-2023学年-W班
这个作业要求在哪里	软件工程实践总结&个人技术博客
这个作业的目标	课程的回顾与总结，个人技术的总结
其他参考文献	《构建之法》

axios是一个流行的基于Promise的HTTP客户端，用于在浏览器和Node.js中发送HTTP请求。它通常用于从服务器获取数据或将数据发送到服务器。学习axios的原因在于它简单易用、功能强大且支持浏览器和Node.js环境，可以轻松处理异步请求。技术的难点在于对Promise的理解和处理，以及对HTTP请求和响应的处理。

二、技术详述

2.1 流程图

在这里插入图片描述

2.2 安装axios

在创建好的vue项目框架中安装axios

npm install axios   //npm安装
yarn add axios     //yarn安装

2.3 在项目中导入 axios 模块

import axios from 'axios';

2.4 发起 HTTP 请求

发起get请求

axios.get('http://120.26.168.28:8081/backend/post', {
  params: {
    page: page.value,
    pageSize: pageSize.value,
  },
}).then(res => {
  data.value = res.data.data.records;
  total.value = res.data.data.total;
}).catch(error => {
  console.error('Error fetching data:', error);
  // 处理请求失败的情况，比如提示用户或者记录错误信息
});

发起post请求

axios.post(`http://120.26.168.28:8081/backend/post/detail/${status}`, null, {
      params: {
          postId: postId.value,
      }
  }).then(res => {
      ElMessage({
          message: '审核成功！',
          type: 'success',
      })
      console.log('审核通过成功');
      router.push({ name: 'postList', });
  }).catch(error => {
      ElMessage.error('审核失败！！！')
      console.error('审核通过失败：', error);
  });

发起delete请求

axios.delete('http://120.26.168.28:8081/backend/post/detail', {
      params: {
          postId: postId.value,
      },
  }).then(res => {
      ElMessage({
          message: '删除成功！',
          type: 'success',
      })
      console.log('删除成功');
      router.push({ name: 'postList', });
  }).catch(error => {
      ElMessage.error('删除失败！！！')
      console.error('删除失败', error);
      // 处理请求失败的情况，比如提示用户或者记录错误信息
  });

2.5 配置请求

可以通过传递一个配置对象来定制请求，包括设置请求头、请求参数、超时等选项：

const config = {
  headers: {
    'Content-Type': 'application/json'
  },
  params: {
    key: 'value'
  },
  timeout: 5000
};

axios.post('/api/post', data, config);

2.6 拦截器

axios 允许通过拦截器在请求和响应被 then 或 catch 处理前进行拦截，可以用来全局添加请求头、处理请求或响应错误等：

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

2.7 取消请求

通过创建取消令牌，可以取消尚未完成的请求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/data', {
  cancelToken: source.token
});

// 取消请求
source.cancel('Request canceled');

三、使用中遇到的问题和解决过程

3.1 问题一：

跨域请求问题：
问题描述：在开发过程中，由于浏览器的同源策略，可能遇到跨域请求的问题，导致请求失败。
解决过程：在服务端设置合适的跨域访问控制头（CORS），或者使用代理服务器（如 webpack-dev-server 的 proxy）来转发请求，以解决跨域问题。

3.2 问题二：

请求超时问题：
问题描述：在网络环境不稳定的情况下，可能会出现请求长时间无响应或超时的情况。
解决过程：可以通过配置 Axios 的超时时间来限制请求的最大等待时间，以及使用适当的重试策略来处理请求超时问题。

import axios from 'axios';

const instance = axios.create({
  timeout: 5000, // 设置超时时间为5秒
});

instance.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.code === 'ECONNABORTED') {
      console.log('请求超时，请稍后重试');
      // 进行相应的处理，比如重新发起请求
    } else {
      console.error('请求出错:', error.message);
    }
  });