axios 全局配置 封装 拦截器_resquest拦截器的配置

axios

npm i axios --save

axios({
  url: 'http://localhost:3000/dj/program?rid=336355127',
  method: 'get'
}).then(res => {
  console.log(res);
})

axios({
  url: 'http://localhost:3000/search',
  // 专门针对get请求的参数拼接
  params:{
    keywords: '海阔天空'
  },
  method: 'get'
}).then(res => {
  console.log(res);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

并发请求

axios.all([
  axios({
    url: 'http://localhost:3000/dj/program?rid=336355127',
  }),
  axios({
    url:'http://localhost:3000/comment/music?id=186016&limit=1'
  })

]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))
1
2
3
4
5
6
7
8
9
10
11
12

全局配置

param:{} URL查询对象

baseURL: “”

method: ‘’ 请求对象

data:{key: ‘’} request body

axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.timeout = 5000


axios({
  url: '/dj/program?rid=336355127',
  method: 'get'
}).then(res => {
  console.log(res);
})

axios({
  url: '/search',
  // 专门针对get请求的参数拼接
  params:{
    keywords: '海阔天空'
  },
  method: 'get'
}).then(res => {
  console.log(res);
})

axios.all([
  axios({
    url: '/dj/program?rid=336355127',
  }),
  axios({
    url:'/comment/music?id=186016&limit=1'
  })

]).then(axios.spread((res1,res2) => {
  console.log(res1);
  console.log(res2);
}))
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

axios实例

通过axios.create 方法创建实例

 const instance1 = axios.create({
    baseURL : 'http://localhost:3000',
    timeout: 5000
 })
 instance1({
   url:'/dj/program?rid=336355127'
 }).then(res => {
 console.log(res);
 })
1
2
3
4
5
6
7
8
9

封装

在src 目录下面创建network/request.js文件

在这里面创建实例，在需要时候import 即可

axios.create 创建的return的就是Promise对象，只要返回即可

所以推荐resquest4 的写法

实例

export function request4(config) {

  // 创建实例
  const instance4 = axios.create({
    baseURL:'http://localhost:3000',
    timeout: 5000
  })
  //发送真正的网络请求
  return instance4(config)

}
1
2
3
4
5
6
7
8
9
10
11

调用

request4({
  url: '/dj/program?rid=336355127'
}).then(res =>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})
1
2
3
4
5
6
7

其余的写法有回调、自己封装promise 可以帮助理解axios的实例和调用

export function request(config,success,failure) {
  // 创建实例
  const instance1 = axios.create({
   baseURL:'http://localhost:3000',
    timeout: 5000
  })
  //发送真正的网络请求
  instance1(config)
    .then(res => {
      console.log(res);
      success(res);
    })
    .catch(err => {
      console.log(err);
      failure(err)

    })
}

export function request2(config) {

  // 创建实例
  const instance2 = axios.create({
    baseURL:'http://localhost:3000',
    timeout: 5000
  })
  //发送真正的网络请求
  instance2(config.baseConfig)
    .then(res => {
      console.log(res);
      config.success(res);
    })
    .catch(err => {
      console.log(err);
      config.failure(err)

    })

}


export function request3(config) {
  return new Promise(((resolve,reject) => {
    // 创建实例
    const instance3 = axios.create({
      baseURL:'http://localhost:3000',
      timeout: 5000
    })
    //发送真正的网络请求
    instance3(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  }))

}
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

request({
  url: '/dj/program?rid=336355127'
},res => {
    console.log(res);
  }, err => {
    console.log(err);
  }
)


request2({
  baseConfig: {
    url: '/dj/program?rid=336355127'
  },
  success: function (res) {
    console.log(res);
  },
  failure: function (err) {
    console.log(err);
  }

})


request3({
  url: '/dj/program?rid=336355127'
}).then(res =>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})
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

拦截器

4中拦截器

全局

axios.interceptors.request
1

请求成功

请求失败

响应成功

响应失败

export function request4(config) {

  // 创建实例
  const instance4 = axios.create({
    baseURL:'http://localhost:3000',
    timeout: 5000
  })
  //拦截器
  // axios.interceptors.request
    //请求拦截
  instance4.interceptors.request.use(config =>{
    console.log(config);
    //config 配置不符合
    //每次发送网络请求时候，希望界面显示一个请求的图标
    //某些请求（如登录token ）必须携带特殊值，可以在此判断
    return config; //必须返回不然将config拦截下来
  },error => {
    console.log(error);
  })

  // 响应拦截
  instance4.interceptors.response.use(res => {
    console.log(res);
    return res.data; // 必须返回值 ，否则在使用中res 无值
  },err => {
    console.log(err);
  })
  //发送真正的网络请求
  return instance4(config)

}
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