Axios学习笔记 - 三毛笔记

Ajax是对原生XHR的封装，而Axios又对原生Ajax进行了封装。

介绍

Axios是一个基于Promise的网络请求库，主要实现Ajax异步通信功能，用于向后端发起请求，是一种可以发HTTP请求的JS库。

使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">{{ info }}</div>
  </body>
  <script>
    const app = {
      data() {
        return {
          info: 'Ajax 测试',
        }
      },
      mounted() {
        axios
          .get('http://thapi.top/API/sjsp.php')
          .then((res) => (this.info = res.data))
          .catch(function (err) {
            console.log(err)
          })
      },
    }

    Vue.createApp(app).mount('#app')
  </script>
</html>

携带参数

axios.post(
  'http://thapi.top/API/sjsp.php',
  {},
  {
    params: {
      name: '&&&',
      age: 18,
    },
  }
)

发数据

用请求体发数据，格式为urlencoded：

const params = new URLSearchParams()
params.append('name', '张三')
params.append('age', 18)
axios.post('http://thapi.top/API/sjsp.php', params)

用请求体发数据，格式为multipart：

const params = new FormData()
params.append('name', '张三')
params.append('age', 18)
axios.post('http://thapi.top/API/sjsp.php', params)

用请求体发数据，格式为json：

axios.post('http://thapi.top/API/sjsp.php', {
  name: '张三',
  age: 18,
})

默认配置

Axios对象可以直接使用，但使用的是默认设置。用 axios.create 创建的对象，可以覆盖默认设置，常见的 config 项有：

名称	含义
baseURL	将自动加在URL前面
headers	请求头，类型为简单对象
params	跟在URL后的请求参数，类型为简单对象或URLSearchParams
data	请求体，类型有简单对象、FormData、URLSearchParams、File等
withCredentials	跨域时是否携带Cookie等凭证，默认为false
responseType	响应类型，默认为json

const _axios = axios.create({
  baseURL: 'http://localhost:3000',
  withCredentials: true,
})
_axios.post('/api/post')

请求拦截器

const _axios = axios.create({
  baseURL: 'http://localhost:3000',
  withCredentials: true,
})
// 请求拦截器
_axios.interceptors.request.use(
  function (config) {
    config.headers = {
      Authorization: 'test',
    }
    return config
  },
  function (e) {
    return Promise.reject(e)
  }
)
_axios.post('/api/post')
_axios.post('/api/post2')

响应拦截器

// 响应拦截器
_axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内走这里
    return response
  },
  function (e) {
    if (e.response.status === 400) {
      console.log('请求参数不正确')
      return Promise.resolve(400)
    } else if (e.response.status === 404) {
      console.log('资源未找到')
      return Promise.resolve(404)
    }

    return Promise.reject(e)
  }
)