vue3.0 Axios如何使用_vue3.0使用axios-CSDN博客

本文链接：https://blog.csdn.net/m0_60970928/article/details/128964318

本文详细介绍了Vue3.0中如何使用Axios进行HTTP请求，包括Axios的安装、配置项、发送请求的不同方式（如axios(config)、axios(url, config)以及别名请求）、自定义创建实例、响应数据处理、错误处理和解决跨域问题。通过这篇文章，读者可以全面了解Vue3.0中Axios的基本用法。" 123227440,10645231,使用CSS布局创建个人主页,"['前端开发', 'HTML', 'CSS', '布局技术']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是Axios

Axios是一个基于promise网络请求库，作用于node.js和浏览器中
Axios在服务端它使用原生node.jshttp模块，而在客户端（浏览端）则使用 XMLHttpRequests
Axios可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据

2.安装Axios

Axios安装方式：npm install axios

3.Axios 配置项

这些是创建请求时最常用的配置选项；详细的配置项请前往Axios官网
提示：只有url是必需的；如果没有指定method，则请求将默认使用GET方法

{
   
   
    url: '/user', // 请求的服务器地址 URL        
    method: 'GET', // 请求方式，默认值 GET
    baseURL: 'https://some-domain.com/api/', // 如果 url 不是绝对地址，则会发送请求时在 url 前方加上 baseURL
    headers: {
   
   'X-Requested-With': 'XMLHttpRequest'}, // 自定义请求头
    params: {
   
    ID: 12345 }, // 与请求一起发送的 URL 参数
    data: {
   
    firstName: 'Fred' },  // 作为请求体被发送的数据，仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
    timeout: 1000, // 请求超时的毫秒数，如果请求时间超过 `timeout` 的值，则请求会被中断，默认值是 `0` (永不超时)，
    responseType: 'json', // 期望服务器返回的数据类型，
    //选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'， 浏览器专属：'blob'，默认值 json
    // 允许在向服务器发送前，修改请求数据，它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    transformRequest: [function (data, headers) {
   
      
        return data; // 对发送的 data 进行任意转换处理
    }],
    // 在传递给 then/catch 前，允许修改响应数据
    tran