vue开发中关于axios的封装过程

目录 关于axios的封装 vue中axios全局封装 axios封装 api的统一管理

关于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
? ? })
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue开发中关于axios的封装过程的详细内容...