Chapter 06 axios使用指南

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

---

前言

在现代前端开发中，与后端API进行数据交互是至关重要的。Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。本文详细介绍了Axios的基本用法。

一、导入

导入官网提供的 axios 在线地址：

<script src="https://unpkg.com/axios/dist/axios.min.js">script>

二、发送GET请求

axios.get(url[, config]) 方法用于向指定的URL发送HTTP GET请求，以从服务器获取数据。若请求成功，将执行.then中的回调函数，并可以访问服务器返回的数据；如果请求失败，则执行.catch中的回调函数，并输出错误信息。

axios.get(url[, config]) 方法中的 url 指请求的资源的完整 URL，其中包括 API 的基本地址。
API：一种允许不同软件应用程序之间进行交互和通信的接口。它定义了请求和响应的格式，以及如何访问某些功能或数据。

API 的基本地址：通常被称为“基础 URL”或 “端点”， 用于访问某一 API 服务的主地址。这个地址通常包含协议（如 http 或 https）、域名、以及可选的路径。它指向一个服务器上的特定资源或服务。

http://或https://{域名}/{资源路径}

API 服务 ：通常是一个后端服务，运行在服务器上，处理来自客户端（如 web 应用、移动应用等）的请求，并返回相应的结果。它们可以提供数据访问、服务发现、功能调用、异步处理等多种功能。

使用axios.get(url[, config])方法时，查询参数可以直接嵌入在URL中，也可以通过在config对象中使用params配置来传递。

①直接在URL中传递查询参数

axios.get('https://api.example.com/data?key=value&key2=values')  
  .then(function(response) {  
    console.log('响应数据:', response.data);  
  })  
  .catch(function(err) {  
    console.error('发生错误:', err);  
  });  

• https://api.example.com/data?key=value&key2=values：请求的URL

  • https://api.example.com/data：API的基本地址，表示要访问的资源
  • ?key=value&key2=values：查询参数，它们通过?符号开始，多个参数间用&分隔
    • key=value：第一个查询参数，key是参数名称，value是参数值
    • key2=values：第二个查询参数，key2是参数名称，values是参数值

• .then(function(response) {...})

  • then(...)：一个Promise方法，表示成功获取响应后要执行的代码
  • function(response) {...}：一个回调函数，当请求成功时会被调用。
    • response：服务器返回的数据，它是一个对象，包含多个信息

• console.log('响应数据:', response.data);：在控制台输出响应的数据

• .catch(function(err) {...})

  • catch(...)：一个Promise方法，用于捕捉请求过程中发生的错误
  • function(err) {...}: 这个回调函数，当请求失败时会被调用
    • err：错误对象，包含了关于错误的信息。

• console.error('发生错误:', err);：在控制台输出错误信息

②通过params传递查询参数

axios.get('https://api.example.com/data', {  
  params: {  
    key: 'value',  
    key2: 'values'  
  }  
})  
.then(function(response) {  
  console.log('响应数据:', response.data);  
})  
.catch(function(err) {  
  console.error('发生错误:', err);  
});  

• params：配置对象中的一个属性，用于传递查询参数。Axios会自动将它们转换为URL的查询字符串格式：

https://api.example.com/datakey=value&key2=values

• key: 'value': 一个查询参数，key是参数名称，value是参数值。

三、发送POST请求

使用axios.post(url, data[, config])方法方法用于发送 HTTP POST 请求，向服务器提交数据。

axios.post('https://api.example.com/data', {  
  key: 'value',  
  key2: 'value2'  
})  
.then(function(response) {  
  console.log('创建成功:', response.data);  
})  
.catch(function(err) {  
  console.error('发生错误:', err);  
});  

• https://api.example.com/data：目标 URL，用于提交数据
  • https://api.example.com ：服务器的地址
  • /data：要访问的特定资源
• { key: 'value', key2: 'value2' }：发送到服务器的数据，通常是一个对象
  • key: 数据的属性名，表示要发送的数据的字段
  • 'value': key 对应的值

四、处理响应

axios.get('https://api.example.com/users')  
  .then(response => {  
    // 处理成功响应  
    console.log('用户数据:', response.data);  
  })  
  .catch(error => {  
    // 处理错误  
    if (error.response) {  
      // 请求已发出，且服务器回复了状态码  
      console.error('错误状态码:', error.response.status);  
      console.error('错误信息:', error.response.data);  
    } else if (error.request) {  
      // 请求已发出但没有收到响应  
      console.error('没有收到响应:', error.request);  
    } else {  
      // 其他错误  
      console.error('发生错误:', error.message);  
    }  
  });  

• .then(response => {...})
  • then(...)：一个 Promise 方法，用于处理请求成功的情况
  • response => {...}：一个箭头函数，在请求成功时执行
  • response：服务器返回的响应对象，通常包含多个属性：
    • data：服务器返回的实际数据（例如用户信息）
    • status：HTTP 响应状态码（如 200 表示请求成功）
    • statusText：HTTP 状态文本（如 “OK”）
    • headers：响应头部，包含许多关于响应的信息
    • config：请求时的配置对象，包含请求的相关设置
    • request：实际的请求对象