結(jié)合axios對項(xiàng)目中的api請求進(jìn)行封裝操作
痛點(diǎn):
1. 后端對全部請求的url進(jìn)行了調(diào)整。
2.后端要求給所有的請求頭部添加一個(gè)token, 或者對請求添加其他全局處理。
3.請求代碼直接寫在每個(gè)頁面里, 看起來代碼臃腫,不夠簡練,太難管理。
4.看到請求代碼, 不明白該請求是干嘛的,語義化不夠明顯。 ...
上面列舉的是一些常見的問題,如果沒對api進(jìn)行封裝,當(dāng)請求比較多的時(shí)候,修改起來欲哭無淚,解決這些問題可以進(jìn)行以下操作
1.對axios進(jìn)行二次封裝
2.對全部api請求也進(jìn)行封裝
如下是對axios 進(jìn)行二次封裝, 文件名是 network/index.js:
import axios from "axios"; import Cookies from "js-cookie"; // 設(shè)置超時(shí)時(shí)間 const myAxios = axios.create({ timeout: 5000 }); // 跳轉(zhuǎn)登錄頁面 function nav2Login() { location.href = '/xxxx/login' } // 添加一個(gè)請求攔截器 myAxios.interceptors.request.use( function(config) { // Do something before request is sent config.headers["token"] = Cookies.get("token") || ""; return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // 添加一個(gè)響應(yīng)攔截器 myAxios.interceptors.response.use( function(response) { // Do something with response data // 這里只是以200 401為示例, 其他狀態(tài)碼可以根據(jù)需要自行添加 if (response.status === 200) { return response.data; } else if (response.status === 401) { nav2Login() return Promise.reject(); } else { return { status: 0, message: response.data.message }; } }, function(error) { // Do something with response error return Promise.reject(error); } ); export default myAxios;
下面是對全部的api進(jìn)行了封裝,文件名是 network/api.js:
import axios from "./index.js"; const API = { userList: 'api/user/all', // 用戶列表 cityList: 'api/city/all', // 城市列表 }; function Axios(obj) { return axios({ ...obj }).catch(e => { // 這里兜住error, 從而不影響后續(xù)代碼執(zhí)行,避免出現(xiàn)白屏 return { status: 0, message: "網(wǎng)絡(luò)請求異常" }; }); } // 給函數(shù)命名的時(shí)候 盡量語義化 function getUserList(params) { return Axios({ url: API.userList, method: "post", params }); } function getCityList(params) { return Axios({ url: API.cityList, method: "get", params }); } export default { getUserList, getCityList, }
可以把這些請求掛載在一個(gè)全局的變量上, 以Vue為例:
import Vue from 'vue' import App from './App.vue' import router from './router' import api from "@/network/api.js"; Vue.prototype.$api = api; new Vue({ router, render: h => h(App) }).$mount('#app')
Vue項(xiàng)目中使用方法如下:
this.$api.getUserList(obj).then(res => { // 處理res }).catch(err){ // 處理 err } // 或者使用async await async getUserList () { try { const res = await this.$api.getUserList(obj) // 處理res } catch (err) { // 處理err } }
補(bǔ)充知識:Vue項(xiàng)目中對axios進(jìn)行封裝以及api接口請求
對axios進(jìn)行封裝:
/* 定義一個(gè)ajax請求函數(shù),并且其返回值: promise對象(異步返回的數(shù)據(jù)是: response.data) */ import axios from 'axios'; export default function ajax (url, data={}, type='GET') { return new Promise(function (resolve, reject) { // 執(zhí)行異步ajax請求 let promise if (type === 'GET') { // 準(zhǔn)備url query參數(shù)數(shù)據(jù), let dataStr = '' //數(shù)據(jù)拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 發(fā)送get請求 promise = axios.get(url) } else { // 發(fā)送post請求 promise = axios.post(url, data) } promise.then(function (response) { // 成功了調(diào)用resolve() resolve(response.data) }).catch(function (error) { //失敗了調(diào)用reject() reject(error) }) }) }
以上這篇結(jié)合axios對項(xiàng)目中的api請求進(jìn)行封裝操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式
這篇文章主要給大家介紹了基于Vue3+Ts實(shí)現(xiàn)父子組件間傳值的兩種方式,使用v-model+emit傳值和使用v-bind+emit傳值兩種方式,文章通過代碼示例介紹的非常詳細(xì),感興趣的同學(xué)可以參考閱讀2023-09-09vue計(jì)算屬性想要傳入?yún)?shù)如何解決
這篇文章主要介紹了vue計(jì)算屬性想要傳入?yún)?shù)如何解決問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01vue中配置mint-ui報(bào)css錯(cuò)誤問題的解決方法
本篇文章主要介紹了vue中配置mint-ui報(bào)css錯(cuò)誤問題的解決方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗(yàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06vue+ElementUI 關(guān)閉對話框清空驗(yàn)證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關(guān)閉對話框清空驗(yàn)證,清除form表單的操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue3系統(tǒng)進(jìn)入頁面前的權(quán)限判斷和重定向方式
這篇文章主要介紹了vue3系統(tǒng)進(jìn)入頁面前的權(quán)限判斷和重定向方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03