Axios学习笔记

28次阅读
没有评论

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

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

介绍

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

Axios 官网:https://www.axios-http.cn/

使用

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

正文完
 0
三毛笔记
版权声明:本站原创文章,由 三毛笔记 于2023-10-08发表,共计2090字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)