快捷導(dǎo)航

vue開發(fā)中關(guān)于axios的封裝過程

更新時間：2022年08月03日 09:50:59 作者：前端@小菜

這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

關(guān)于axios的封裝

下面代碼參考了 vue-element-admin 中的封裝方式，request.js 文件如下，封裝一個 axios 實(shí)例：

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（響應(yīng)攔截器）
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) {
? ? ? ? // 不同狀態(tài)碼下執(zhí)行不同操作
? ? ? ? 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
? })
}

這里參數(shù)用的 params，它是拼接在 url 中的。還有一個參數(shù) data，傳遞的數(shù)據(jù)格式為對象。

import request from '../base/request'
?
export function basedata(data) {
? return request({
? ? url: '/user/basedata',
? ? method: 'POST',
? ? data
? })
}

然后我們就只需引入封裝好的 api 進(jìn)行調(diào)用即可。

另外，如果請求超時需要自動重新獲取數(shù)據(jù)，可參考我的另一篇文章：解決 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) {
? ? // 在發(fā)送請求之前做些什么
? ? if (VueCookies.isKey('Authorization')) {
? ? ? ? config.headers.Authorization = VueCookies.get('Authorization')
? ? }
? ? return config;
}, function(error) {
? ? // 對請求錯誤做些什么
? ? return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(function(response) {
? ? // 2xx 范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)。
? ? // 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
? ? return response.data
}, function(error) {
? ? // 超出 2xx 范圍的狀態(tài)碼都會觸發(fā)該函數(shù)。
? ? // 對響應(yīng)錯誤做點(diǎn)什么
? ? return Promise.reject(error);
});

api的統(tǒng)一管理

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

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: