介绍

首先需要知道：axios不是一种新的技术。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

安装

npm 安装

$ npm install axios

bower 安装

$ bower install axios

使用 CDN

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

axios 基本使用

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 导入axios
import axios from 'axios'

axios({
    url: 'http://139.198.169.201/json/index.json',
    method: 'get'
}).then(res => {
    console.log(res);

}).catch(err => {
    console.log('请求失败');
})

// 默认是get接收
// 直接确认接收类型
axios.get()

axios.post()

axios请求方法

  • axios(config)
  • axios.request(config)
  • axios.get(url[,config])
  • axios.post(url[,config])
  • axios.delete(url[,config])
  • axios.head(url[,config])
  • axios.put(url[,data[,config]])
  • axios.patch(url[,data[,config]])

axios发生并发请求

使用 axios.all 可以放入多个请求的数组

axios.all([]) 返回结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1，res2

1
2
3
4
5
6
7
8
9
10
11
12
axios.all([axios({
	url: 'http://123.207.32.32:8000/home/multidata'
}),axios({
	url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})])
  .then(res =>{
  
})
1
2
3
4
5
6
7
8
9
10
11
12
// 使用axios.spread 展开写法
.then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))

// 测试后跟数据解构效果一样
})])
.then(([res1, res2]) => {
    console.log(res1);
    console.log(res2);
})

全局配置

在全局设置默认配置

1
2
3
4
5
6
7
8
9
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.get({
  url: '/home/data',
  params: { //参数
		type: 'sell',
    page: 5
  }
})

Axios 实例

创建 axios 实例来应变不同的服务器请求数据

1
2
3
4
5
6
7
8
9
const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
	url: '/home/multdata'
}).then(res =>{
  console.log(res)
})

Axios 封装

为了让代码更具时代性，不要直接在组件中引用，而是创建一个文件夹去引用文件

src/netWork/request.js

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
// request.js

import axios from 'axios'

/*
*	第一种写法
*/
// 传递三个参数,success,failure 是函数，用来获取信息的回应
export function request(config, success, failure) {
    // 创建实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    // 发送真正的网络请求
    instance(config)
        .then(res => {
            success(res)
        })
        .catch(err => {
            failure(err)
        })
}


/*
*	第二种写法
*/
export function request(config) {
    // 创建实例
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    // 发送真正的网络请求
    instance(config.baseConfig)
        .then(res => {
            config.success(res)
        })
        .catch(err => {
            config.failure(err)
        })
}

/*
* 第三种，使用Promise
*/
export function request(config) {
    return new Promise((resolve, reject) => {
        // 创建实例
        const instance = axios.create({
                baseURL: 'http://123.207.32.32:8000',
                timeout: 5000
            })
            // 发送真正的网络请求
        instance(config)
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err)
            })
    })
}

/*
* 第三种，使用Promise改进版
*/
export function request(config) {
    // 创建实例
    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
        // 发送真正的网络请求
        // create本身返回的就是promise
    return instance(config)

}
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
// main.js 引用
import { request } from '@/netWork/request'

// 第一种引用方式
request({
    url: '/home/multidata',
    method: 'get'
}, res => {console.log(res)}
 , err => {console.log(err)})


// 第二种引用方式
request({
    baseConfig: {
        url: '/home/multidata'
    },
    success: function(res) {
        console.log(res)
    },
    failure: function(err) {
        console.log(err);
    }
})

// 第三种引用方式
request({
    url: '/home/multidata'
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})


Axios 拦截器的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export function request(config) {
    const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })
    
    // axios拦截器 还可以全局拦截
   	instance.interceptors.request.use(config =>{
      // 请求成功
    },err =>{
      // 请求失败
    }) 
    
    
    return instance(config)

}