Vue.JS请求工具Axios的封装

Caleb ... 2020-01-06
  • Vue
  • Vue方法
大约 3 分钟

接触vue已经很长时间,也经常使用axios,但是原生封装的方法都很难满足日程开发的需求,所以这期就写一下axios的封装。

底部有完整代码

# 1.前期准备

# 创建一个js文件,命名自定。我这里定义为request.js

import axios from 'axios'  //导入原生的axios 
import qs from 'qs';       //导入qs,做字符串的序列化,为了后面不同的场景使用。
import {
  MessageBox,
  Message
} from 'element-ui'            //引入element-ui的两个组件,分别是消息框和消息提示         
import store from '@/store'    //引入状态管理仓库
import router from '@/router'  //引入路由

import {
  getToken
} from '@/utils/auth'          //根据业务需求,这个方法是用来获取Token

1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.创建实例

// 创建一个axios实例
const service = axios.create({
  baseURL: 'XXXXXX',         // url = base url + request url
  withCredentials: true,    // 当跨域请求时发送cookie
  timeout: 15000           // 请求时间
})
1
2
3
4
5
6

# 3.请求拦截器

# 在发送请求之前做些什么

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
    // 让每个请求携带令牌——['Has-Token']作为自定义密钥。
    // 请根据实际情况修改。
    config.headers['Has-Token'] = getToken()
    }
    //在这里根据自己相关的需求做不同请求头的切换,我司是需要使用这两种请求头。
    if (config.json) {
      config.headers['Content-Type'] = 'application/json'
    } else {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
      config.data = qs.stringify(config.data);   //利用qs做json序列化
    }
    return config
  },
  error => {
    // 处理请求错误
    console.log(error) // 调试
    return Promise.reject(error)
  }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 4.响应拦截器

# 在收到相应后做些什么

service.interceptors.response.use(
  response => {
    const res = response.data    //这是响应返回后的结果
    //在这里可以根据返回的状态码对存在响应错误的请求做拦截,提前做处理。

    //以下为我司的处理规则
    // 如果自定义代码不是200,则判断为错误。
    if (res.code == 200 || res.code == 300) {
      // 重新登陆
      MessageBox.confirm('您的登录状态存在问题,您可以取消以停留在此页面,或再次登录', '系统提示', {
        confirmButtonText: '重新登录',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload();
        })
      })
      return
    } else {
      if (res.code == 700) {
        Message.warning('您没有获取请求的权限!')
        router.replace({
          path: '/401'
        })
        return
      } else {
        return res
      }
    }
    //end
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
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

# 5.抛出实例

export default service
1

# 6.如何调用

//以我司请求为例子
import request from '@/utils/request'

export function getCity(data) {
  return request({
    url: '/getCity/findParentId',
    method: 'post',
    data
  })
}

1
2
3
4
5
6
7
8
9
10
11

# 7.完整代码

import axios from 'axios'
import qs from 'qs';
import {
  MessageBox,
  Message
} from 'element-ui'
import store from '@/store'
import router from '@/router'
import {
  getToken
} from '@/utils/auth'

// 创建一个axios实例
const service = axios.create({
  baseURL: 'XXXXX', 
  withCredentials: true, 
  timeout: 15000 
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
    // 让每个请求携带令牌——['Has-Token']作为自定义密钥。
    // 请根据实际情况修改。
    config.headers['Has-Token'] = getToken()
    }
    //在这里根据自己相关的需求做不同请求头的切换,我司是需要使用这两种请求头。
    if (config.json) {
      config.headers['Content-Type'] = 'application/json'
    } else {
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
      config.data = qs.stringify(config.data);   //利用qs做json序列化
    }
    return config
  },
  error => {
    // 处理请求错误
    console.log(error) // 调试
    return Promise.reject(error)
  }
)
service.interceptors.response.use(
  response => {
    const res = response.data    //这是响应返回后的结果
    //在这里可以根据返回的状态码对存在响应错误的请求做拦截,提前做处理。

    //以下为我司的处理规则
    // 如果自定义代码不是200,则判断为错误。
    if (res.code == 200 || res.code == 300) {
      // 重新登陆
      MessageBox.confirm('您的登录状态存在问题,您可以取消以停留在此页面,或再次登录', '系统提示', {
        confirmButtonText: '重新登录',
        type: 'warning'
      }).then(() => {
        store.dispatch('user/resetToken').then(() => {
          location.reload();
        })
      })
      return
    } else {
      if (res.code == 700) {
        Message.warning('您没有获取请求的权限!')
        router.replace({
          path: '/401'
        })
        return
      } else {
        return res
      }
    }
    //end
  },
  error => {
    console.log('err' + error)
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service
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
73
74
75
76
77
78
79
80
81
82
83
84

下期编写一些简单且常用的正则验证方法。共勉!

打赏