axios学习

发表于 | 分类于
字数统计: 905 word | 阅读时长 ≈ 3 min
为什么要用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%