vue開(kāi)發(fā)中關(guān)于axios的封裝過(guò)程
關(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í)的問(wèn)題
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)文章
Element-ui之ElScrollBar組件滾動(dòng)條的使用方法
這篇文章主要介紹了Element-ui之ElScrollBar組件滾動(dòng)條的使用方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue?目錄樹(shù)的展開(kāi)與關(guān)閉的實(shí)現(xiàn)
Vue作為一款流行的前端框架,提供了一種數(shù)據(jù)驅(qū)動(dòng)的方式來(lái)實(shí)現(xiàn)目錄樹(shù),本文主要介紹了vue?目錄樹(shù)的展開(kāi)與關(guān)閉的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼
本篇文章主要介紹了vue2.0中vue-cli實(shí)現(xiàn)全選、單選計(jì)算總價(jià)格的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過(guò)使用生命周期的 created() 函數(shù),在組件創(chuàng)建完成后調(diào)用該方法,本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應(yīng)用場(chǎng)景,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個(gè)v-model實(shí)現(xiàn)這個(gè)數(shù)據(jù)的綁定,但是在有些輸入框中,還需要一些其他的指令搭配這個(gè)v-model指令結(jié)合使用,這篇文章主要介紹了vue的表單數(shù)據(jù)收集,基本指令和自定義指令,需要的朋友可以參考下2023-01-01
使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能
這篇文章主要介紹了使用canvas實(shí)現(xiàn)一個(gè)vue彈幕組件功能,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信詳解
這篇文章主要給大家介紹了關(guān)于vue2利用Bus.js如何實(shí)現(xiàn)非父子組件通信的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08

