axios学习

为什么要用axios

axios的基本使用
  • get,获取数据
  • post,提交数据(表单提交以及文件上传)
  • put,更新数据 (提交所有的数据)
  • patch,提交数据 (提交修改的数据)
  • delete,删除数据
1.get的使用
1
2
3
4
5
axios({
method: 'get',
url: '',
params: {}
}).then(res => { do something })

或者简写为:

1
axios.get(url, params).then(res => { do something })

params会出现在请求头中的querry string parameters中,并且会出现在浏览器的地址栏中,即会拼接到url中。

2.post方法的使用

post的请求头中会有一个content-type,该字段有两个值,一个为form-data,一般用于表单提交(文件上传,图片上传等等);另一个是application/json即,传递的是json数据。

1
2
3
4
5
axios({
method: 'post',
url: '',
data: {}
}).then(res => { do something })

或者写别名方法:

1
axios.post(url, data).then(res => { do something })

如果需要传递的是form-data,那么我们需要先实例化一个FormData,然后将data指向form-data即可

3.delete的使用方法
1
2
3
4
5
axios({
method: 'delete',
url: '',
params: {}
}).then(res => { do something })

config的第三个字段可以为params,这样参数会拼接在url中,如果我们不想使之出现在url中,我们只需要将params替换为data

并发请求

同时进行多个请求,并统一处理返回值,如果在某些场景中我们需要同时依赖两个接口返回的数据,那么我们可以使用并发请求。

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

1
2
3
4
5
6
7
8
axios.all([  // 这里的参数是一个数组,里面包含了axios请求
axios.get('url1'), // 请求的先后顺序就是代码中的顺序
axios.get('url2')
]).then(
axios.spread((res1, res2) => { // spread用来分割返回值
console.log(res1, res2)
}
)
axios深入
创建axios实例
1
2
3
4
5
6
7
8
9
10
11
12
13
// axios实例化
let api = axios.create({
baseURL: 'localhost:8080', // 请求的域名
timeout: 1000, // 设置请求的超时时长,超过时长报401超时
method: 'get,post',
headers: { // 设置请求头
token: ''
},
params: {},
data: {}
})
// 使用axios实例
api.get('/data.json')
axios配置
  • 全局配置,例如axios.defaults.timeout = 1000
  • 实例配置, 在创建axios实例时传入的配置,如果不传实例配置就会使用全局配置
  • 请求配置,在使用axios请求时,可以单独传入新的配置
常见配置

这三种配置的优先级为:请求配置 > 实例配置 > 全局配置

axios拦截器

请求拦截器:

1
2
3
4
axios.interceptors.request.use(
config => {}, // 在发送请求前的一些处理逻辑
err => {} // 在请求错误后的处理
)

响应拦截器:

1
2
3
4
axios.interceptors.response.use(
res => { return res }, // 请求成功后对响应数据做一定的处理
err => { return Promis.reject(err)} // 在响应错误后的处理,可以用catch捕捉
)
拦截器可以做到的事

请求拦截:

请求拦截中错误拦截较少,通常都是配置相关的拦截可能的错误比如请求超时,可以将页面跳转到一个错误页面中。

响应拦截:

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

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

axios错误处理

一般来说,如果我们在调用接口时请求错误或者响应错误,程序处理流程都会进入到catch代码块中,例如:

1
2
3
axios.get('/data.json').then(callback).catch(err => {
console.log(err)
})
0%