Axios

网络请求

Overview

异步请求；基于 Promise 的 HTTP 库，广泛应用于浏览器和 Node.js

通用、主流的第三方库；用于获取本地和远程资源，如 JSON 数据、图片等

默认是 Promise 用法；支持 async/await 用法

自动转换 JSON 数据

资源服务器应提前开启，并严格按照接口使用

更多信息，点击访问 Axios 中文网

Installment

在项目目录安装

npm i axios --save

也可以使用CDN方式，如 cdnjs、bootcdn - 适合浏览器环境；建议将库下载到本地使用。。。CDN网络经常。。。

保留 crossorigin="anonymous" 避免浏览器提示

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.7.8/axios.min.js" crossorigin="anonymous"></script>

Usage

先引入后使用

局部使用和全局使用

需要通过代理解决跨域的问题

静态网站托管平台通常已经做了跨域处理，可以直接使用

支持 Promise 和 asyn - await 方式

局部使用

哪个组件需要就在哪个组件内操作

在组件的逻辑中引入使用

根据需要配置|指定默认参数，如 baseURL、params、method、header、timeout；baseURL 应和数据服务器的地址保持一致

企业级的开发，还需要指定不同的环境变量使用相应的URL；如开发环境变量文件 .env 中指定

VITE_BASE_URL=http://127.0.0.1:5173

环境变量
item	desc
.env	默认环境变量，所有环境都会加载
.env.development	开发环境变量
.env.test	测试环境变量
.env.production	生产环境变量

代码托管时，确保在 .gitignore 文件中添加 .env* 以避免敏感信息被提交暴露

1. 引入、配置

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.timeout = 3000

如果配置了环境变量

axios.defaults.baseURL = import.meta.env.VITE_BASE_URL;

2. 承诺使用 - 根据需要封装为函数

axios.get('/user?ID=12345')
  .then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) => {
    // 处理错误情况
    console.log(error);
  })
  .finally(() => {
    // 总是会执行
})

2. 异步等待使用 - 需要声明为异步函数或函数表达式再使用

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

let getUser = async () => {}

全局使用

引入并配置；一次引入，多次使用

早期以 Vue 实例属性的形式使用；现在通过 Provide & Inject 实现

所有组件直接使用

常用 API

获取 GET

可以传递参数；S端使用 req.query 获取

无参

axios.get(baseURL + '/test')
  .then(res => {
    console.log('res', res.data);
  })
  .catch(err => {
    console.log('err', err);
  })
  .finally(() => {
    console.log('done for log');
  })

有参

使用 ? 拼接提交；S端使用 req.query 获取

axios.get(baseURL + '/test?id=123')
.then(res => {
  console.log(res.data)
})

使用路径参数 / 拼接提交；S端使用 req.params 获取

axios.get(baseURL + '/test/123')
.then(res => {
  console.log(res.data)
})

使用 params 提交；S端仍然使用 req.query 获取

适合传递多个数据，避免拼接错误

axios.get(baseURL + '/test', {
  params: { id: 112233 }
})
.then(res => {
  console.log(res.data)
})

S端

router.get('/', (req, res) => {
  console.log(req.query);
  res.json({
    code: 'ok',
    type: 'get query',
    data: req.query.id || 'hi, there.'
  })
})

router.get('/:id', (req, res) => {
  console.log('params', req.params);
  res.json({
    code: 'ok',
    type: 'get params',
    data: req.params.id || 'hi, there.'
  })
})

增加 POST

直接传递参数

C端

传递JSON - 默认是 JSON 格式的数据，可以略去请求头 header 中的 content-type 设置

axios.post(baseURL + '/test', {
  id: 1,
})
  .then(res => console.log('res', res))

传递键值对key-value - 需要；略

现在都是通过数据绑定的形式传递对象|JSON

S端

router.post('/', (req, res) => {
  console.log('req body', req.body);
  res.json({
    code: 'ok',
    type: 'post',
    data: req.body.id || 'hi, there.'
  })
})

删除 DELETE

根据 id 删除

参数传递方式同 GET：支持3种形式

C端

axios.delete(baseURL + '/test?id=123')
  .then(res => console.log(res.data))

axios.delete(baseURL + '/test/123')
  .then(res =>console.log(res.data))

axios.delete(baseURL + '/test', {
  params: {
    id: 123321
  }
})
  .then(res => console.log(res.data))

S端

router.delete('/', (req, res) => {
  console.log('query', req.query);
  res.json({
    code: 'ok',
    type: 'delete query',
    data: req.query.id || 'hi, there.'
  })
})

router.delete('/:id', (req, res) => {
  console.log('params', req.params);
  res.json({
    code: 'ok',
    type: 'delete',
    data: req.params.id || 'hi, there.'
  })
})

修改 PUT

同 POST，根据 id 和数据完成修改；路径方式传递 id

C端

axios.put(baseURL + '/test/2147', {
  id: 123
})
  .then(res => console.log(res))

S端

router.put('/:id', (req, res) => {
  console.log('req body', req.body);
  console.log('req params', req.params);
  res.json({
    code: 'ok',
    type: 'put',
    data: req.body.id || 'hi, there.'
  })
})

拦截器 interceptor

请求拦截器

请求拦截器：在请求发送前，对请求参数进行拦截，修改参数；对请求头进行拦截，修改请求头；对请求体进行拦截，修改请求体

发出去的请求是经过处理后的请求

配置请求，如请求头、指定Token用来验证身份

axios.interceptors.request.use( (config) => config,  (error) => Promise.reject(error))

响应拦截器

响应拦截器：在请求返回后，对响应数据进行拦截，修改响应数据；对响应头进行拦截，修改响应头；对响应头进行拦截，修改响应体

接受到的响应是经过处理后的响应

过滤响应数据

axios.interceptors.response.use( (response) => {
  return response;
},  (error) => {
  return Promise.reject(error);
});

趣味应用 application

[] 获取远程数据 -

[] 获取本地数据 -

1. 如何渲染获取到的数据？使用新节点？使用innerHtml？

2. 表格<table>的使用：使用默认表格还是特别指定表头<thead>和表体<tbody>？

序号	内容	难度

//使用节点
for (let i = 0; i < res.data.length; i++) {
let tr = document.createElement('tr')
for (let item in res.data[i]) {
    let td = document.createElement('td')
    td.innerHTML = res.data[i][item]
    tr.appendChild(td)
}
axiosLocal.appendChild(tr)
}

//使用innerHtml
for (let i = 0; i < res.data.length; i++) {
let tr = ''
for (let item in res.data[i]) {
    tr += '' + res.data[i][item] + ''
}
tr += ''
axiosLocal.innerHTML += tr
}

推荐资源 links

1. 随机小狗

2. 随机图片

3. 土味情话

4. http://ajax-base-api-t.itheima.net/api

/getbooks

/addbook