axios的基础使用

一.介绍 

---

         axios 是一个基于 Promise 的 HTTP 客户端库，可以用于浏览器和 Node.js 上的 HTTP 请求。它提供了丰富的 API，支持异步请求、拦截器、取消请求等常用功能，且易于使用和扩展。总而言之axios就是一个第三方库，便于浏览器与服务器通信。

二.使用方式

---

1.CDN引入

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2.终端命令行下载后引入

npm install axios

3.其余官网查找 

三.使用方法

---

 1.基本使用

axios({
  url: '目标资源地址'
}).then(result => {
  console.log(result)
})

 2.携带查询参数

• 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

• 最终表现为 url 网址后面用?拼接格式：XXXX?参数名1=值1&参数名2=值2

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

 3.规定请求方法

        上面的是有关获取数据，所以说是默认的GET方法，而GET方法又不需要再特别指明，请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作，当然这几种更加常用，还有一些不常用的可以自行查阅；

a.  GET：用于获取资源。通过发送 GET 请求，可以从服务器端获取指定 URL 的数据。

b.  POST：用于向服务器提交数据。通过发送 POST 请求，可以将数据发送到指定的 URL，并在请求体中包含要提交的数据。

c.  PUT：用于更新资源。通过发送 PUT 请求，可以向服务器发送更新后的数据，用于更新指定 URL 的资源。

d.  DELETE：用于删除资源。通过发送 DELETE 请求，可以从服务器端删除指定 URL 的资源。

e.  PATCH：用于部分更新资源。通过发送 PATCH 请求，可以向服务器发送部分更新后的数据，用于更新指定 URL 的资源。

下面以提交数据为例子：

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

4.错误处理 

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

5.请求方式别名

        根据需要修改请求方法的名字

axios.post('/api/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error.message);
  });