Vue项目axios对请求数据以及接口api进行封装 + token_前端怎么封装接口传入token

前言： 接口进行封装，方便后期维护

方案一：接口封装通过直接封装axios，调用对应api方法进行接口直接的参数传递。

1-先封装http( utils => http.js )

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs'
// axios 配置
var instance = axios.create({
    headers: {
        'Content-Type': 'application/json',
    },
    timeout: 30000,
    baseURL: 'xxxxxx'   //测试服接口请求地址
})
// console.log(process.env.NODE_ENV, '请求地址--');

//拦截重复请求
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;
let removeRepeatUrl = (config) => {
    let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
    for (let p in pending) {
        if (pending[p].u === config.url + '&' + config.method + '&' + comValue) { //当前请求在数组中存在时执行函数体
            pending[p].f();         //执行取消操作
            pending.splice(p, 1);   //把这条记录从数组中移除
        }
    }
}
let saveRepeatUrl = (config) => {
    let comValue = config.method == 'get' ? qs.stringify(config.params) : qs.stringify(config.data);
    config.cancelToken = new cancelToken((c) => {
        pending.push({ u: config.url + '&' + config.method + '&' + comValue, f: c });  // 自定义唯一标识
    });
}

// 添加请求拦截器
instance.interceptors.request.use(config => {
    config => {
        if (localStorage.getItem('token')) {
            //token字段是要和后端协商好的
            config.headers.common["token"] = localStorage.getItem('token');
        }
        return config;
    },
    // 在发送请求之前做些什么，比如传token
    removeRepeatUrl(config);       //在一个ajax发送前执行一下取消操作
    saveRepeatUrl(config);         //保存请求地址
    return config
}, error => {
    // 对请求错误做些什么
    console.log(error) // for debug
    return Promise.reject(error);
})

// 添加响应拦截器
instance.interceptors.response.use(response => {
    removeRepeatUrl(response.config);        //执行取消操作，把已经完成的请求从pending中移除
    // 对响应数据做点什么
    // const res = response.data;
    if (response.data.status) {

        let ifStatus = response.data.status !== 0 && response.data.status !== -1 && response.data.status !== 200;
        if (ifStatus && response.config.responseType === 'json') {
            // console.log("res.data.status------------",res.data);
            if (response.data.status === -40100 || response.data.status === -40000) {
                let errorMeg = '接口访问异常!';
                DowithError(errorMeg);
            } else {
                console.log('---------------------61----------------------');
                // console.log(res.data);
                let errorMeg = response.data.message;
                FattleWithError(errorMeg);
            }
            return Promise.reject(response);
        }
    }
    else {
        console.log("未返回data.status");
    }
    return response;
    //对错误代码做处理
    // return response;
}, error => {
    // 对响应错误做点什么
    console.log('err' + error)// for debug
    // return Promise.reject(error);
    if (error.response && error.response.status) {
        // console.log(error.response.data.message);
        let errorMeg = '错误代码：' + error.response.status;
        if (error.response.status === 401) {
            errorMeg = '该用户没有权限';
            DowithError(errorMeg);
        } else {
            errorMeg = error.response.data.message;
            FattleWithError(errorMeg);
        }
        return Promise.reject(error);
    }
    else {
        console.log("未返回error.response.status");
    }
});

function DowithError(errorMeg) {
    Vue.prototype.$alert(errorMeg, '提示', {
        confirmButtonText: '确定',
        callback: () => {
            store.dispatch('FedLogOut');//跳转到登录
        }
    });
}
function FattleWithError(errorMeg) {
    Vue.prototype.$alert(errorMeg, '提示', {
        confirmButtonText: '确定',
        callback: () => { }
    });
}
export default instance;

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data).then(response => {
            //对接口错误码做处理
            resolve(response.data);
        }, err => {
            console.log(String(err).toLowerCase(), '网络异常--');
            reject(err);
        })
    })
}

/**
 * get 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function get(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.get(url, {
            params: data
        })
            .then(response => {
                resolve(response);
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * 封装所有请求
 * @param methed
 * @param url
 * @param data 
 * @param headers
 * @returns {Promise}
 */
export function request(methed, url, data = {}, headers) {
    return new Promise((resolve, reject) => {
        instance({
            method: methed || 'post',
            url: url,
            params: methed === 'get' ? data : '',
            data: methed !== 'get' ? data : '',
            headers: headers || { 'Content-Type': 'application/json' },
        })
            .then(response => {
                //对接口错误码做处理
                resolve(response.data);
            })
            .catch(err => {
                reject(err)
            })
    })
}

/**
 * excel导出请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function postResponseFile(url, data = {}) {
    return new Promise((resolve, reject) => {
        instance.post(url, data, { responseType: "blob" })
            .then(response => {
                resolve(response.data);
            }, 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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

2-接口文件 （ api=> login.js ）

import http from '@/utils/http'

// 登录方法
export function login(data) {
  return http({
    url: '/gkgp/user/loginIn',
    method: 'post',
    data: data
  })
}
1
2
3
4
5
6
7
8
9
10

3-页面使用(login.vue)

import { login } from "@/api/login";

login(logindata)
  .then((res) => {
    if (res.data.code == 200) {
      console.log(res.data.data, "登录信息---");
      this.$router.push({ path: "/home" }).catch(() => {});
    } else {
      this.$message({
        type: "warning",
        message: res.data.msg,
      });
    }
  })
  .catch((error) => {
    reject(error);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

方案一：接口封装通过封装对应axios，然后把请求方法每次通过vuex里面进行过滤一遍。

1–先封装axios ( utils => axios.js )

import router from '../router'
import axios from "axios"  //引入axios


const service = axios.create({
    baseURL: "XXXX",  //请求的后台地址
    timeout: 5000
})

//请求头 token 封装
service.defaults.headers.post['Content-Type'] = 'application/json';
service.interceptors.request.use(
	config => {
		if (localStorage.getItem('token')) {
			//token字段是要和后端协商好的
			config.headers.common["token"] = localStorage.getItem('token');
			// debugger
		}
		return config;
	},
	error => {
		return Promise.reject(error);
	});

// http response 拦截器
service.interceptors.response.use(
  response => {
    if (response.data.code == 999) {
      localStorage.clear()
      router.replace({
        path: "/login",
        query: {
          redirect: router.currentRoute.fullPath
        } //从哪个页面跳转
      })
    }
    // }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


export function get(url, params = {}) { //get 封装
	return new Promise((resolve, reject) => {
		service.get(url, {
			params: params
		}).then(response => {
			resolve(response.data);
		}).catch(err => {
			reject(err)
		})
	})


}

export function post(url, data = {}) { //post封装
	return new Promise((resolve, reject) => {
		service.post(url, data)
			.then(response => {
				resolve(response.data);
			}, err => {
				reject(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

2–接口文件 （ constants => api.js ）

// 接口封装 需要的接口都房子api.js里面
export default {
  LOGIN: '/login/user_login', // 登录
}


1
2
3
4
5
6

3–store => index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as login from './login/index'  //子模块引入

Vue.use(Vuex)


export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  //主模块
  modules: {
    login:login.createLogin(), //子模块必须在主模块中引入
  }
})


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4–子模块 login => index.js

import * as axios from '../../utils/axios'  //引入axios
import API from '@/constants/api'          //引入api接口

export const state = () => ({
  token: '',
})

export const mutations = {
  SET_USER_TOKEN(state, data) {
    state.token = data
  },
}

export const actions = {
  async login({
    commit
  }, params) {
    const res = await axios.post(API.LOGIN, params)
    commit('SET_USER_TOKEN', res.data)
    return res
  },
  async news () {
    return await axios.post(API.NEWS)
  }
}

export const createLogin = () => {
  return{
    namespaced: true,
    state,
    actions,
    mutations
  }
}


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

5–页面使用

<script>
import { mapActions } from "vuex";  //别忘了引入

export default {
  created() {
    this.fn()
  },
  methods: {
    ...mapActions({
      login: 'login/login',  //调用(login/login) 第一个login是你定义的模块名字  第二个login 是你写的方法
    }),
    //...mapActions 等同于===》// this.$store.dispatch('login/login', formdata)
    fn() {
      var formdata= {
        mobile: 18322111111,
        password: "admin111111",
      };
      this.login(formdata); //也可以写完this.$store.dispatch('login/login', formdata)
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23