avatar

axios的基本使用

安装

npm install axios –save

引入

在main.js里面也行,在App.vue的script标签里也行

import axios from ‘axios’

示例

1
2
3
4
5
6
7
8
9
10
11
axios({
url: 'http://www.sgyat.cn/api/videodata/',
method: '',
// 针对get请求的参数拼接
params: {
p1: '',
p2: ''
}
}).then(res => {
consloe.log(res);
})

并发请求

多个请求都执行完再返回

1
2
3
4
5
6
7
axios.all(
[
axios({config}),
axios({config})
]).then(results => {
console.log(results)
})

抽取配置

1
2
3
axios.defaults.baseURL = 'http://www.sgyat.cn'
axios.defaults.timeout = 5000
axios.defaults.headers = ''

创建实例

不能总是使用全局axios

1
2
3
4
5
6
7
8
9
10
11
const instance1 = axios.create({
baseURL: 'http://sgyat.cn',
timeout: 5000
})

instance1({
url: '/api/videodata',
params: {},
}).then(res => {
console.log(res);
})

模块封装

逻辑分析

在每一个组件中的常规请求逻辑分析:

  1. 在App.vue文件中导入axios

  2. 在Vue实例中返回空result数据

  3. 利用Vue的生命周期函数created,在其中利用axios发送网络请求

  4. 请求成功后利用then将结果保存在this.result中

  5. 利用mustache语法,在template标签中将result进行展示

App.vue

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
<template>
<div id="app">
<div>{{result}}</div>
</div>
</template>

<script>
import axios from 'axios'

export default{
name: 'App',
components: {
},
data() {
return{
result: ''
}
},
created() {
axios({
url: 'http://sgyat.cn'
}).then(res => {
console.log(res);
this.result = res;
})
}
}
</script>

问题分析

如果有另一个组件也要发送网络请求,则又需要导入!试想有50多个,如果有一天该框架不再进行维护,那岂不是完蛋了!

一定不要过度依赖于某一第三方框架

将第三方框架进行打包应用

解决方案

  1. 新建network文件夹,内涵request.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import axios from 'axios'

// config为要请求的具体页面参数等
// success为请求成功的回调函数,等价于C语言的函数指针,实现请求成功后要处理的操作
// failure为请求失败的回调函数,等价于C语言的函数指针,实现请求失败后要处理的操作
export function request(config, success, failure) {
// 创建axios的实例
const instance = axios.create({
baseURL: 'http://sgyat.cn',
timeout: 5000
})

// 发送真正的网络请求
instance(config)
.then(res => {
success(res);
})
.catch(err => {
failure(err);
})
}
  1. main.js中进行数据处理
1
2
3
4
5
6
7
8
9
10
11
12
import {request} from './network/request';

// 第一个参数对应config
// 第二个箭头函数中的res参数为请求到的数据,在箭头函数中进行打印;
// 第二个箭头函数中的err参数为请求到的数据,在箭头函数中进行打印;
request({
url: '/api/videodata'
}, res => {
console.log(res);
}, err => {
console.log(err);
})
  1. 代码优化

这里利用了Promise本身提供的两个回调函数,在main.js文件中就不用再传入两个回调函数了

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) => {
// 创建axios的实例
const instance = axios.create({
baseURL: 'http://sgyat.cn',
timeout: 5000
})

// 发送真正的网络请求
instance(config)
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
})
})
}

main.js

1
2
3
4
5
6
7
8
9
10
import {request} from './network/request';

// .then与.catch是利用request函数返回的Promise提供的回调函数
request({
url: '/api/videodata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})

注意到axios.create()的返回对象本身就是一个Promise,所以最终方案为:

request.js

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

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

return instance(config);
}

拦截器

axios有请求拦截器(请求成功、请求失败)和响应拦截器(响应成功、响应失败)

请求拦截器

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

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

// 2. axios的拦截器
// 2.1 请求拦截的作用
instance.interceptors.request.use(config => {
console.log(config);
// 1. 检查config中的一些信息是否符合服务器的要求
// 2. 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
// 3. 某些网络请求(比如登录(token)),必须携带一些特殊的信息
// 最后一定要给人家还回去
return config;
}, err => {
console.log(err);
})

// 3.发送真正的网络请求
return instance(config);
}

响应拦截

request.js

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

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

// 2. axios的拦截器
// 2.2 响应拦截的作用
instance.interceptors.response.use(res => {
console.log(res);
// 最后一定要给人家还回去,不然main.js中拿不到数据
return res.data;
}, err => {
console.log(err);
})

// 3.发送真正的网络请求
return instance(config);
}
文章作者: Gy
文章链接: http://sgyat.cn/2021/03/19/axios/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 年轻没有梦
打赏
  • 微信
    微信
  • 支付宝
    支付宝

评论