Vue二次封装axios为插件使用详解

Vue 二次封装 Axios 为插件使用详解 Vue 二次封装 Axios 为插件使用详解主要介绍了 Vue 二次封装 Axios 为插件使用详解，以满足项目中的请求需求。小编觉得挺不错的，现在分享给大家，也给大家做个参考。 一、为什么需要封装 Axios？ 随着项目的发展，请求数据的方式越来越多样化， Axios 作为一个流行的请求库，已经成为很多项目中的不二之选。然而，直接使用 Axios 可能会存在一些问题，如统一 URL 配置、统一 API 请求、请求拦截器等。因此，我们需要对 Axios 进行二次封装，以满足项目中的需求。 二、基本的封装要求 基本的封装要求包括： 1. 统一 URL 配置 2. 统一 API 请求 3. 请求拦截器，例如：带上 token 等，设置请求头 4. 响应拦截器，例如：统一错误处理，页面重定向等 5. 根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理 三、封装 Axios 的文件结构 使用 Vue-cli 进行相关的封装，在 src 文件夹下： src |-- http 封装 Axios 模块文件夹 |---- config.js Axios 的默认配置 |---- api.js 二次封装 Axios，拦截器等 |---- interface.js 请求接口文件 |---- index.js 将 Axios 封装成插件 四、config.js 的默认配置 config.js 的默认配置参照 GitHub，只是示例： export default { method: 'post', // 基础 url 前缀 baseURL: 'https://easy-mock.com/mock/5ad75e9f41d4d65f0e935be4/example', // 请求头信息 headers: { 'Content-Type':'application/json;charset=UTF-8' }, // 参数 data: {}, // 设置超时时间 timeout: 10000, // 携带凭证 withCredentials: false, // 返回数据类型 responseType: 'json' } 五、api.js 的实现 api.js 的实现： import axios from 'axios' import config from './config.js' import qs from 'qs' export default function $axios (options) { return new Promise((resolve, reject) => { const instance = axios.create({ baseURL: config.baseURL, headers: {}, transformResponse: [function (data) {}] }) // request 拦截器 instance.interceptors.request.use( config => { // Tip: 1 // 请求开始的时候可以结合 Vuex 开启全屏的 loading 动画 // Tip: 2 // 带上 token , 可以结合 Vuex 或者重 localStorage // if (store.getters.token) { // config.headers['X-Token'] = getToken() // 让每个请求携带 token--['X-Token']为自定义 key 请根据实际情况自行修改 // } else { // // 重定向到登录页面 // } // Tip: 3 // 根据请求方法，序列化传来的参数，根据后端需求是否序列化 if (config.method.toLocaleLowerCase() === 'post' || config.method.toLocaleLowerCase() === 'put' || config.method.toLocaleLowerCase() === 'delete') { config.data = qs.stringify(config.data) } return config }, e => { return Promise.reject(e) } ) // response 拦截器 instance.interceptors.response.use( response => { return response }, e => { return Promise.reject(e) } ) return instance(options) }) } 六、结语 本文主要介绍了 Vue 二次封装 Axios 为插件使用详解，包括基本的封装要求、封装 Axios 的文件结构、config.js 的默认配置、api.js 的实现等，以满足项目中的请求需求。