Axios学习笔记

14次阅读

共计 2090 个字符，预计需要花费 6 分钟才能阅读完成。

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)
  }
)

正文完