为什么选择axios?

🔷 功能特点:

  🔹在浏览器中发送 XMLHttpRequests 请求

  🔹在 node.js 中发送 http请求

  🔹支持 Promise API

  🔹拦截请求和响应

  🔹转换请求和响应数据


axios 的请求方式

🔷 支持多种请求方式:

  🔹 axios(config)

  🔹 axios.request(config)

  🔹 axios.get(url[, config])

  🔹 axios.delete(url[, config])

  🔹 axios.head(url[, config])

  🔹 axios.post(url[, data[, config]])

  🔹 axios.put(url[, data[, config]])

  🔹 axios.patch(url[, data[, config]])


axios 发送基本请求

这里我们使用了axios(config) 的请求方式。

config是一个对象,它默认是采用 GET 请求的,当然如果想要使用POST请求,可以添加 method:“POST”

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


使用 axios.get(url[, config]) 发送请求演示。


发送并发请求

有时候, 我们可能需求同时发送两个请求

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

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


使用axios.all()

使用格式: axios.all([axios(config),axios(config)])


使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

使用格式: axios.all([axios(config),axios(config)]).then(axios.spread())


全局配置

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

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

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

axios.defaults


常用的配置选项


🔷请求类型

  🔹 method: ‘get’,

🔷URL查询对象

  🔹 params:{ id: 12 },


🔷请求类型

  🔹 method: ‘post’,

🔷request body

  🔹 data: { key: ‘aa’},


我们需要注意的是,如果请求类型的get,则后面添加的请求参数应该使用的是 params{ } 。如果请求类型的post,则后面添加的请求参数应该使用的是 data{ } 。


🔷请求地址

  🔹 url: ‘/user’,

🔷请根路径

  🔹 baseURL: ‘http://www.mt.com/api',

🔷超时设置s

  🔹 timeout: 1000,

🔷请求前的数据处理

  🔹 transformRequest:[function(data){}],

🔷请求后的数据处理

  🔹 transformResponse: [function(data){}],

🔷自定义的请求头

  🔹 headers:{‘x-Requested-With’:’XMLHttpRequest’},

🔷查询对象序列化函数

  🔹 paramsSerializer: function(params){ }

🔷跨域是否带Token

  🔹 withCredentials: false,

🔷自定义请求处理

  🔹 adapter: function(resolve, reject, config){},

🔷身份验证信息

  🔹 auth: { uname: ‘’, pwd: ‘12’},

🔷响应的数据格式 json / blob /document /arraybuffer / text / stream

  🔹 responseType: ‘json’,


axios 实例

🔷 为什么要创建axios的实例呢?

  🔹 当我们从axios模块中导入对象时, 使用的实例是默认的实例.

  🔹 当给该实例设置一些默认配置时, 这些配置就被固定下来了.

  🔹 但是后续开发中, 某些配置可能会不太一样.

  🔹 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.

  🔹 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

所以当我们的业务比较多的时候,请求接口比较多,我们使用上面的全局配置就不行了。这个时候我们就要使用axios实例了。


网络请求模块的封装

我们为什么要axios进行封装?

如果我们使用的 axios 有一天不进行了维护,或者出现重大的bug ,我们需要换其他的第三方网络请求框架。那么我们需要在每一个组件中都需要修改,很是不好。所以我们对网络请求模块进行封装,即使有一个我们需要改换其他的第三方网络请求框架,就只对我们的网络请求模块进去修改即可。


创建一个network文件夹。这里面放对网络封装相关的文件。

创建request.js


封装一:

使用回调函数。

request.js

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

export function request(config, success, failure) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求
instance(config)
.then(res => {
success(res)
})
.catch(rej => {
failure(rej)
})
}

使用模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
import { request } from "./newwork/request"

request({
url: 'home/multidata'
}, function(res) {
console.log(res);
})
request({
url: "api/z8/home/data",
params: { type: 'pop', page: 1 }
}, function(res) {
console.log(res);
})

封装二:

使用回调函数。

request.js

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

export function request(config) {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})

// 2、发送网络请求请求
instance(config.baseConfig)
.then(res => {
config.success(res)
})
.catch(rej => {
fonfig.failure(rej)
})
}

使用模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
import axios from 'axios'

request({
baseConfig: {
url: '/home/multidata'
},
success(res) {
console.log(res);
},
failure(rej) {
console.log(rej);
}
})

封装三:

使用Promise。

request.js

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

export function request(config) {
return new Promise((resolve, reject) => {
// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})

// 2、发送网络请求请求
instance(config)
.then(res => {
resolve(res)
})
.catch(rej => {
reject(rej)
})
})
}

使用模块:

1
2
3
4
5
6
7
8
9
10
import { request } from "./newwork/request"

request({
url: 'home/multidata'

}).then(res => {
console.log(res);
}).catch(rej => {
console.log(rej);
})

封装四:(最终方案)

使用Promise。

request.js

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

export function request(config) {

// 1.创建实例
const instance = axios.create({
baseURL: 'http://111.111.111.111:8000',
timeout: 5000
})
// 2、发送网络请求请求

// axios 实例本身返回是一个Promise对象
return instance(config)

}

使用模块:

1
2
3
4
5
6
7
8
9
10
import { request } from "./newwork/request"

request({
url: 'home/multidata'

}).then(res => {
console.log(res);
}).catch(rej => {
console.log(rej);
})

axios 拦截器的使用

axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。


axios 请求拦截器

🔷 为什么要拦截请求呐。

  🔹 我们对请求的config进行一些修改。

  🔹 比如config中的一些信息不符合服务器的要求。

  🔹 比如每次发送网络请求的时候,都希望在界面中显示一个请求的图标。

  🔹 比如某些网络请求(比如 登陆(携带token)),必须携带一些特殊的信息。

instance.interceptors.request.use(参数一,参数二) 传入两个参数,拦截请求成功函数,和拦截请求失败函数。

注意:我们拦截之后,对请求做完一系列修改,我们要返回请求,不然后面我们请求不到数据。


🔷 请求拦截可以做到的事情:

  🔹 请求拦截中错误拦截较少,通常都是配置相关的拦截。

  🔹 可能的拦截的错误:比如请求超时,可以将页面跳转到一个错误页面中。


axios 响应拦截器

instance.interceptors.response.use() 响应拦截也是两个参数。拦截响应成功函数,和拦截响应失败函数。

同样我们拦截到响应之后,要返回响应,通常返回return response.data 即可,因为我们只要数据。


🔷 响应拦截中完成的事情:

  🔹 响应的成功拦截中,主要是对数据进行过滤。


  🔹 响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。



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
import axios from 'axios'

export function request(config) {

// 1.创建实例
const instance = axios.create({
baseURL: 'http://11.11.11.11:8000',
timeout: 5000
})
// 2.请求拦截
instance.interceptors.request.use(config => {

return config
}, err => {
console.log(err);
return err
})

// 响应拦截
instance.interceptors.response.use(response => {
return response.data
}, err => {
return err
})
// 3、发送网络请求请求
// axios 实例返回是一个Promise对象
return instance(config)

}