Axios实际使用

置顶左手喵子

已于 2025-04-08 11:15:38 修改

阅读量677

点赞数 4

分类专栏： # Ajax 文章标签： ajax

于 2025-03-24 10:16:13 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42017221/article/details/146469236

版权

Ajax 专栏收录该内容

4 篇文章

订阅专栏

Axios 的 baseURL 配置方法

Axios 的 baseurl 怎么配置？深入剖析 Axios 的 baseURL 配置方法

方法一：全局配置

在整个应用程序中，我们可以全局配置 Axios 的 baseURL，这样所有的请求都会自动加上该基础路径。

// 在引入 Axios 后，设置全局的 baseURL
axios.defaults.baseURL = 'https://api.example.com';

方法二：实例化配置

除了全局配置，我们还可以为每个 Axios 实例单独配置 baseURL。这种方法适用于需要同时与多个服务器进行交互的应用程序。

// 创建一个 Axios 实例并设置 baseURL
const apiInstance123 = axios.create({
  baseURL: 'https://api.example.com'
});

const apiInstance456 = axios.create({
  baseURL: 'https://api.example.com'
});

// 使用该实例发送请求
apiInstance123.get('/users')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

apiInstance456.get('/users')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法三：临时配置

有时候，我们需要在某个请求中临时更改 baseURL，而不影响全局或实例级别的配置。这可以通过在请求的配置中指定 baseURL 来实现。

axios.get('/posts', {
  baseURL: 'https://otherapi.example.com'
})
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

方法四：通过拦截器动态配置

如果你需要根据特定条件动态地改变 baseURL，你可以使用 Axios 的请求拦截器，在发送请求之前修改配置。

import axios from 'axios';

// 创建 Axios 实例
const api = axios.create();

// 添加请求拦截器
api.interceptors.request.use(config => {
  // 在这里根据条件设置 baseURL
  config.baseURL = shouldUseProductionAPI ? 'https://api.example.com/' : 'https://staging.api.example.com/';
  return config;
});

// 发起请求，实际请求的 URL 是根据请求拦截器中的 baseURL 动态决定的
api.get('/posts')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

文件上传（Upload File）

Axios 中怎么上传文件（Upload File）？上传方法有哪几种？

1. 使用 FormData 对象

FormData是一个用于创建表单数据的 API，可用于发送包含文件和其他表单数据的multipart/form-data请求。这是处理文件上传的常用方法。通过FormData对象，可以将文件数据添加到表单中，然后使用 Axios 的post或put方法发送请求。

const axios = require('axios');

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];

const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log('上传成功', response.data);
}).catch(error => {
  console.error('上传失败', error);
});

2. 使用 URL 参数

除了使用FormData，你还可以通过在 URL 参数中指定文件名的方式上传文件。这种方法适用于后端期望文件名直接出现在 URL 中的情况。

const axios = require('axios');

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];

axios.post('/upload', file, {
  params: {
    fileName: file.name
  }
}).then(response => {
  console.log('上传成功', response.data);
}).catch(error => {
  console.error('上传失败', error);
});

3. 使用 Base64 编码

这种方法将文件转换成 Base64 编码的字符串，然后通过普通的 JSON 格式发送给服务器。这种方式适用于较小的文件，因为 Base64 编码会增加数据大小。

const axios = require('axios');

const fileInput = document.querySelector('#fileInput');
const file = fileInput.files[0];

const reader = new FileReader();

reader.onload = function(event) {
  const base64Data = event.target.result.split(',')[1];

  axios.post('/upload', {
    file: base64Data
  }).then(response => {
    console.log('上传成功', response.data);
  }).catch(error => {
    console.error('上传失败', error);
  });
};

reader.readAsDataURL(file);

4.发送文件 Blob 对象

可以通过 CreateObjectURL 把文件对象转成 Blob URL，然后作为 Axios 请求的数据发送。

const file = document.getElementById('file').files[0];

const blobUrl = URL.createObjectURL(file);

axios.post('/upload', blobUrl, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }  
});

请求拦截器

接口地址:获取-用户个人资料 - B站-AJAX和黑马头条-数据管理平台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    登录页面
    手机号：<input type="text" class="mobile"  value="13888888888">
    验证码：<input type="text" class="code"  value="246810">
    <div class="btn">提交</div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 配置axios的baseurl -->
    <!-- 接码地址https://geek.itheima.net/ -->
    <!-- 用token判断登录状态，控制访问权限 -->
    <!-- 如果有token,代表之前登录过没有的话，跳转到重新登录 -->
    <!-- 前端只能判断有无 -->
    <!-- 个人信息设置和axios请求拦截器 -->
    <script src="request.js"></script>
    <script>
        const btn = document.querySelector(".btn")
        btn.addEventListener("click",function(){
            const mobile = document.querySelector(".mobile").value
            const code = document.querySelector(".code").value
            console.log(mobile);
            console.log(code);
            axios({
                url:"/v1_0/authorizations",
                method:"POST",
                data:{
                    mobile:mobile,
                    code:code
                }
            }).then(result=>{
                console.log('登录成功');
                console.log(result);
                localStorage.setItem('token',result.data.data.token)
                setTimeout(function(){
                    location.href="list.html"
                },1000)
            }).catch(error=>{
                console.log('登录失败');
            })
        })
    </script>
</body>
</html>

request.js中

// 配置基地址：baseURL
axios.defaults.baseURL="https://geek.itheima.net";

// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
  // 在发送请求之前做些什么
  // 统一携带 token 令牌字符串在请求头上
  const token = localStorage.getItem('token')
  if(token){
    config.headers.Authorization = `Bearer ${token}`
  }
  // 在发送之前携带默认的信息
  config.params = {
		pageSize: 3,
    ...config.params   // 请求传入的参数（可覆盖默认值）
	}
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    详情页
    <div class="box"></div>
    <div class="btn">退出登录</div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   
    <script src="request.js"></script>
    <script src="auth.js"></script>

    <script>
axios({
    url:'/v1_0/user/profile',
    params:{
        pageSize: 30
    },
    // 这里可以发送请求头的正常方式，但是需要使用请求拦截器配置公共的请求头--request.js文件中
    headers:{
        Authorization:`Bearer ${localStorage.getItem('token')}`
    }
}).then(result=>{
    console.log(result.data.data.name);
    document.querySelector(".box").innerHTML=`用户名：${result.data.data.name}`
})

document.querySelector('.btn').addEventListener('click',function(){
    localStorage.clear()
    location.href='login.html'
})
    </script>
    
</body>
</html>

auth.js

const token = localStorage.getItem("token")

if(!token){
    location.href='login.html'
}

响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 直接返回response
  return response

  // 对响应数据做点什么，例如：直接返回服务器的响应结果对象
  // 可以对返回的数据做同一处理--这样login页面中的result就等于了response.data
  // const result = response.data
  // return result;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么，例如：统一对 401 身份验证失败情况做出处理
  // 当list页面的token被修改后，响应请求会返回401，对401统一进行处理
  console.dir(error)
  if (error?.response?.status === 401) {
    alert('身份验证失败，请重新登录')
    // 调研一下
    localStorage.clear()
    location.href = 'login.html'
  }
  return Promise.reject(error);
});