简介

  • 现在主流的通信框架有ajax``axios fetch

    • ajax和axios都是基于**xhr**。ajax是对xhr的封装，而axios在ajax基础上再次封装
      • jquery逐渐被淘汰，但是我们要使用ajax却不得不把整个jquery引入，axios则只需引入它自身
    • fetch则是es的新标准，脱离了xhr

      vue3中使用axios

  • 一般是在mounted或者created周期中使用请求。优先在**created**中请求，因为在mounted中使用可能会出现闪屏。因为mounted时dom已经创建好，执行请求，然后根据请求又修改dom导致闪屏。视情况决定

    axios使用

    post时传递普通参数（&）

  • axios请求get时默认为&参数形式。请求post时默认为json形式。如果在post时希望后端使用@RequestParam或者getAttribe，那么直接传个&形式参数即可，axios会自动识别然后将application/json改为application/x-www-form-urlencoded

    1. axios.post('/user', 'name=jerry&age=19')
    2.   .then(res => {
    3.       console.info(res)
    4.   }
    5. );
    6. 或者参数写在axios外面定义
    7. const params = new URLSearchParams();
    8. params.append('name', 'jerry');
    9. params.append('age', 19);
    10. axios.post('/user', params)
    11.   .then(res => {
    12.       console.info(res)
    13.   }
    14. );

    别名方法

  • 为了方便，，axios 已经为所有支持的请求方法提供了别名。使用别名方法时，不需要在参数config中指定url，请求方法类型，data

    • 别名方法其实就是axios()方法的再次封装 ```javascript • axios.request(config)

• axios.get(url [，config])

• axios.delete(url [，config])

• axios.post(url [，data [，config]])

• axios.put(url [，data [，config]])

• axios.patch(url [，data [，config]])

• axios.head(url [，config])

  1. ```javascript
  2. axios.get('/user?name=tom&age=20')
  3.     .then(res => {
  4.     console.info(res)
  5. }).catch(e => {
  6.     console.info(e)
  7. });
axios.post('/user', {
    name: 'tom',
    age: 20
}).then(res => {
    console.info(res)
}).catch(e => {
    console.info(e)
});

axios()使用

axios({
  url: '/user',
  method: 'GET',
  params: {
    ID: 123
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
})

//还可以这样传递参数：
const obj = new URLSearchParams();
obj.append('ID', 123);

axios({
  url: '/user',
  method: 'GET',
  params: obj   // 看这里，看这里，看这里

axios({
  url: '/user',
  method: 'POST',
  data: {
    name: 'tom',
    age: 20 
  }
}).then( res => {
  console.info(res)
}).catch( e => {
  console.info(e)
});

添加头部信息

//在参数列表里增加： 
headers: {
            'header名': '...'
        }