Yang's Blog HomeArchivesTagsCategories
axios
|VueVue2
Word count: 1.4k|Reading time: 5 min

axios

axios: ajax i/o system.

  • 功能特点 ：
    • 在浏览器中发送 XMLHttpRequests 请求
    • 在 node.js 中发送 http请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
  • 支持多种请求方式
    • 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]])

常用请求方式

get

1
axios.get('地址',配置对象).then(res=>{ res就是相应信息，res.data 才是真正的后端返回的内容 }).catch(err => { 错误信息捕获 })

提交参数

1
axios.get('地址?key=val&key2=val2',配置对象)
1
2
3
4
5
6
axios.get('地址',{
  params:{
    key:val,
    key2:val2
  }
})

post

1
2
axios.post('地址',{ key:val, key2:val2 }).then(res=>{ res就是相应信息，res.data 才是真正的后端返回的内容 })
// 有时候上述提交不可以

解决post提交问题

  • 使用FormData
  • URLSearchParams转义
  • 使用qs包

axios

1
2
3
4
5
6
axios({
   url:"请求地址",
   method:"请求方式",
   data:{  post提交参数},
   params:{ get提交参数 }
}).then(res=>{ res就是相应信息，res.data 才是真正的后端返回的内容 })

all 发送并发请求

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

  • 使用axios.all, 可以放入多个请求的数组. res[0],res[1] 得出结果
  • axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
1
2
3
4
5
6
axios.all([请求1，请求2,...]).then(res=>{
           res是数组，数组每个元素都是请求返回的信息
           // 可使用axios.spread
           axios.spread((res1, res2)) => {
           }
})

create 创建 axios 实例

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

  • 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
  • 但是后续开发中, 某些配置可能会不太一样.
  • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

创建 axios 实例

全局配置

在开发中可能很多参数都是固定的，比如BaseURL

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

1
2
axios.defaults.baseURL = '123.207.32.32:8000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
1
2
3
4
5
6
7
8
axios.all([
  axios.get('/category'),
  axios.get('home/data', {params: {type: 'sell', page: '1'}})
]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

axios 模块化封装

在实际开发过程中，需要对AJAX请求进行统一的封装，使其模块化，易于修改和操作。

所以，最好这样做，而不是直接在 组件内使用 axios 插件 ，那样后期修改整个 axios 时会及其麻烦

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
import axios from "axios";


export function request(config) {
  //  1.配置基本信息   
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:8000/api/z8',
    timeout: 5000
  })
  //  本身返回的就一个 Promise   不需要再次封装一个 Promise来使用
  // 3.发送真正的网络请求  ( 方式一)
  return instance(config)
}

 
//  使用 回调函数   ( 方式二)

// export function request(config, success, failure) {

//   const instance = axios.create({
//     baseURL: 'http://152.136.185.210:8000/api/z8',
//     timeout: 5000
//   })

//   instance(config)
//     .then(res => {
//       success(res)
//     })
//     .catch(err => {
//       failure(err)
//     })

// }


// 使用 Promise      ( 方式三 )
// export function request(config) {

//   return new Promise((resolve, reject) => {
//     const instance = axios.create({
//       baseURL: 'http://152.136.185.210:8000/api/z8',
//       timeout: 5000
//     })

//     instance(config)
//       .then(res => {
//         resolve(res)
//       })
//       .catch(err => {
//         reject(err)
//       })
//   })
// }
//  在组件内 传入对象 进行网络请求

// 方式一和方式三（promise） ，
request({
    url:'/home/multidata'
}).then(res =>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

// 方式二 （使用的回调函数）:
request({
    url:'/home/multidata'
},res=>{
    console.log(res) 
},err=>{
    console.log(err) 
})

axios 拦截器

作用

在请求发送之前或者响应消息之前，进行相应的梳理

  • 请求拦截器
    • 请求发起之前做某些事情
    • 添加token
  • 响应拦截器
    • 响应消息到具体请求之前
    • 做错误判断或者数据处理

实现

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
import axios from "axios";


export function request(config) {
  //  1.配置基本信息   （创建实例， 这样不是全局的）
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:8000/api/z8',
    timeout: 5000
  })
  // 2.axios 拦截器
  // 2.1请求拦截的作用： 
  instance.interceptors.request.use(config => {
    //  这里可以拦截一些：
    // 1. 比如config中的一些信息不符合服务器的要求  
    // 2. 比如每次发送网络请求时，都希望在页面中显示一个请求的图标
    // 3. 某些网络请求（比如登录需要的token，必须携带一些特殊的信息）
    config.headers.token = 'token秘钥'
    // 拦截后 要发出去  要不就收不到
    return config
  }, err => {
    console.log(err);
  })

  // 2.2 响应拦截 
  instance.interceptors.response.use(res => {
      // 响应的成功拦截中，主要是对数据进行过滤。
    return res.data // 真正有用的东西是 data中的数据
  }, err => {
    // 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
    console.log(err);
  })

  //  本身返回的就一个 Promise   不需要再次封装一个 Promise来使用
  // 3.发送真正的网络请求
  return instance(config)
}
VueVue2