vue开发中关于axios的封装过程
作者:前端@小菜
这篇文章主要介绍了vue开发中关于axios的封装过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
关于axios的封装
下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例:
import axios from 'axios' import { BASE_URL } from './http' import router from '../router' // create an axios instance const service = axios.create({ baseURL: BASE_URL, // url = base url + request url withCredentials: true, // send cookies when cross-domain requests(是否支持跨域) timeout: 5000 // request timeout(超时时间) }) // request interceptor(请求拦截器) service.interceptors.request.use( config => { // do something before request is sent return config }, error => { // do something with request error // console.log(error) // for debug return Promise.reject(error) } ) // response interceptor(响应拦截器) service.interceptors.response.use( response => { const res = response.data return res }, error => { if (error.response) { // console.log('err' + error) // for debug switch (error.response.status) { // 不同状态码下执行不同操作 case 401: router.push('/login') break case 404: break case 500: break default: } } return Promise.reject(error) } ) export default service
封装 api:
import request from '../base/request' export function basedata(params) { return request({ url: '/user/basedata', method: 'GET', params }) }
这里参数用的 params,它是拼接在 url 中的。还有一个参数 data,传递的数据格式为对象。
import request from '../base/request' export function basedata(data) { return request({ url: '/user/basedata', method: 'POST', data }) }
然后我们就只需引入封装好的 api 进行调用即可。
另外,如果请求超时需要自动重新获取数据,可参考我的另一篇文章:解决 axios: “timeout of 5000ms exceeded”超时的问题
vue中axios全局封装
axios封装
import axios from 'axios' import Qs from 'qs' import VueCookies from 'vue-cookies'; // const {set, get, isKey } = VueCookies // const AUTH_TOKEN = 1 const axiosInstance = axios.create({ baseURL: '域名', headers: { // 'Authorization': AUTH_TOKEN, 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: [function(data, headers) { if (headers['Content-Type'].includes('application/x-www-form-urlencoded')) { if (data instanceof(FormData || URLSearchParams)) return data; else return Qs.stringify(data); } else if (headers['Content-Type'].includes('application/json')) return JSON.stringify(data) }] }) export default axiosInstance axiosInstance.interceptors.request.use(function(config) { // 在发送请求之前做些什么 if (VueCookies.isKey('Authorization')) { config.headers.Authorization = VueCookies.get('Authorization') } return config; }, function(error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 axiosInstance.interceptors.response.use(function(response) { // 2xx 范围内的状态码都会触发该函数。 // 对响应数据做点什么 return response.data }, function(error) { // 超出 2xx 范围的状态码都会触发该函数。 // 对响应错误做点什么 return Promise.reject(error); });
api的统一管理
import axiosInstance from "../axios"; export function EmailCode(data) { return axiosInstance({ method: 'post', url: 'url', headers: { 'smskey': 'smskey' }, data }) } export function userRegister(data) { return axiosInstance({ method: 'post', url: 'url', data }) } export function userLogin(data) { return axiosInstance({ method: 'post', url: 'url', data }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。