亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2022年08月03日 09:50:59   作者:前端@小菜  
這篇文章主要介紹了vue開發(fā)中關(guān)于axios的封裝過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

關(guān)于axios的封裝

下面代碼參考了 vue-element-admin 中的封裝方式,request.js 文件如下,封裝一個(gè) 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(超時(shí)時(shí)間)
})
?
// request interceptor(請(qǐng)求攔截器)
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 中的。還有一個(gè)參數(shù) data,傳遞的數(shù)據(jù)格式為對(duì)象。

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

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

另外,如果請(qǐng)求超時(shí)需要自動(dòng)重新獲取數(shù)據(jù),可參考我的另一篇文章:解決 axios: “timeout of 5000ms exceeded”超時(shí)的問題

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ā)送請(qǐng)求之前做些什么
? ? if (VueCookies.isKey('Authorization')) {
? ? ? ? config.headers.Authorization = VueCookies.get('Authorization')
? ? }
? ? return config;
}, function(error) {
? ? // 對(duì)請(qǐng)求錯(cuò)誤做些什么
? ? return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(function(response) {
? ? // 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
? ? // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
? ? return response.data
}, function(error) {
? ? // 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
? ? // 對(duì)響應(yīng)錯(cuò)誤做點(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
? ? })
}

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

相關(guān)文章

最新評(píng)論