Axios

网络请求

Overview

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

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

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

自动转换 JSON 数据

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

Deplyment

1. 安装 - 在项目目录安装

npm i axios --save

2. 引入 - 在项目中引入，并根据需要全局配置|指定默认参数，如 baseURL、params、method、header、timeout；baseURL 应和数据服务器的地址保持一致

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

3. 使用 - 在组件的逻辑中请求数据，并应用到组件的结构中

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

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

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

请求方式

承诺 promise

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

异步等待 async/await

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

常用 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