关于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
})
}
以上为个人经验,希望能给大家一个参考,也希望大家多多支持软件开发网。