封装axios:并添加请求（request）拦截器和 响应（response）拦截器_axios怎么添加response

概述

在前后端分离的前端开发中，不能绕开的是axios的调用，在j项目中我们经常会封装axios的使用，这个控件封装了请求前置拦截器和后置拦截器，统一对请求和响应做了封装，封装了AJAX的调用方法。

封装介绍

1、安装 axios

npm install axios –save-dev
1

2、新建文件 axios.js

开始统一封装axios， 首先引入axios依赖

import axios from "axios";
1

3、创建 axios 实例

const service = axios.create({
  baseURL: baseURL, // api base_url
  timeout: 6000 // 请求超时时间
})
1
2
3
4

4、请求拦截器

// 添加请求拦截器
service.interceptors.request.use(config => {
	// 在发送请求前做什么
	... ...
    return config
  },  error => {
		// 对请求错误做些什么
		... ...
		return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
10

5、响应拦截器

// 添加响应拦截器
service.interceptors.response.use( response => {
    // 对响应数据做处理
    ... ...
    return response;
  }, error => {
    // 对响应错误做处理      
    ... ...
    return Promise.reject(error);
  });
1
2
3
4
5
6
7
8
9
10

6、将axios实例暴露出去

export default service;
1

最后，提供一个自己项目里封装的简单axios

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import { VueAxios } from './axios'
import { notification } from 'ant-design-vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import website from '@/config/website';
import {Base64} from 'js-base64';
const baseURL = process.env.VUE_APP_API_BASE_URL
// 创建 axios 实例
const service = axios.create({
  baseURL: baseURL, // api base_url
  timeout: 6000 // 请求超时时间
})

const err = (error) => {
  if (error.response) {
    const data = error.response.data
    const token = Vue.ls.get(ACCESS_TOKEN)
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: 'Unauthorized',
        description: 'Authorization verification failed'
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }else if(error.response.status === 500){
      store.commit('SET_TOKEN', '')
      store.commit('SET_ROLES', [])
      store.commit('SET_INFO', {})
      Vue.ls.remove(ACCESS_TOKEN);

      setTimeout(() => {
        window.location.reload()
      }, 1500)

    }
  }
  return Promise.reject(error)
}

// 请求拦截器request interceptor
service.interceptors.request.use(config => {
    const token = Vue.ls.get(ACCESS_TOKEN);
    config.headers['Authorization'] =`Basic ${Base64.encode(`${client.clientId}:${client.clientSecret}`)}` ;
    if (token) {
      //config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
      config.headers['Authorization'] = 'Bearer ' + token // 让每个请求携带token--['Authorization']为自定义key 请根据实际情况自行修改
    }
    return config
  }, err);

// 响应拦截器response interceptor
service.interceptors.response.use((response) => {
  if (response && response.data && response.data.message) {
    notification.success({
      message: '操作提示',
      description: response.data.message
    })
  }
  return response.data
}, err)
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