img


官方文档与仓库

Vue之axios详解


如何安装 Axios

Using npm:

1
$ npm install axios

Using bower:

1
$ bower install axios

Using yarn:

1
$ yarn add axios

Using jsDelivr CDN:

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

Using unpkg CDN:

1
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

全局配置

🔷在上面的示例中, 我们的BaseURL是固定的

  🔹 事实上, 在开发中可能很多参数都是固定的。

  🔹 这个时候我们可以进行一些抽取, 将一些公共的配置抽取出来，也可以利用axiox的全局配置。

1
axios.defaults

—–传送门—–


GET请求

axios.get(url[, config])

axios 它返回的是一个Promise对象，可以直接在后面使用then catch等方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[0].onclick = function () {
    //GET 请求
    axios.get('/axios-server', {
        //url 参数
        params: {
            id: 100,
            vip: 7
        },
        //请求头信息
        headers: {
            name: 'atguigu',
            age: 20
        }
    }).then(value => {
        console.log(value);
    });
}

POST请求

axios 它返回的是一个Promise对象，可以直接在后面使用then catch等方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
      //配置 baseURL
      axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[1].onclick = function () {
          axios.post('/axios-server', {
              username: 'admin',
              password: 'admin'
          }, {
              //url 
              params: {
                  id: 200,
                  vip: 9
              },
              //请求头参数
              headers: {
                  height: 180,
                  weight: 180,
              }
          }).then(value => {
              console.log(value);
          });
      }

Axios函数 发送 AJAX 请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//配置 baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000';

btns[2].onclick = function(){
    axios({
        //请求方法
        method : 'POST',
        //url
        url: '/axios-server',
        //url参数
        params: {
            vip:10,
            level:30
        },
        //头信息
        headers: {
            a:100,
            b:200
        },
        //请求体参数
        data: {
            username: 'admin',
            password: 'admin'
        }
    }).then(response=>{
        //响应状态码
        console.log(response.status);
        //响应状态字符串
        console.log(response.statusText);
        //响应头信息
        console.log(response.headers);
        //响应体
        console.log(response.data);
    })
}