概述
在前后端分离的前端开发中，不能绕开的是axios的调用，在j项目中我们经常会封装axios的使用，这个控件封装了请求前置拦截器和后置拦截器，统一对请求和响应做了封装，封装了AJAX的调用方法。
封装介绍
1、安装 axios
npm install axios –save-dev
2、新建文件 axios.js
开始统一封装axios， 首先引入axios依赖
import axios from "axios";
3、创建 axios 实例
const service = axios.create({baseURL: baseURL, // api base_urltimeout: 6000 // 请求超时时间})
4、请求拦截器
// 添加请求拦截器service.interceptors.request.use(config => {// 在发送请求前做什么... ...return config}, error => {// 对请求错误做些什么... ...return Promise.reject(error);});
5、响应拦截器
// 添加响应拦截器service.interceptors.response.use( response => {// 对响应数据做处理... ...return response;}, error => {// 对响应错误做处理... ...return Promise.reject(error);});
6、将axios实例暴露出去
export default service;
最后，提供一个自己项目里封装的简单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_urltimeout: 6000 // 请求超时时间})const err = (error) => {if (error.response) {const data = error.response.dataconst 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){mit('SET_TOKEN', '')mit('SET_ROLES', [])mit('SET_INFO', {})Vue.ls.remove(ACCESS_TOKEN);setTimeout(() => {window.location.reload()}, 1500)}}return Promise.reject(error)}// 请求拦截器request interceptorservice.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 interceptorservice.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;
