結合axios對項目中的api請求進行封裝操作
痛點:
1. 后端對全部請求的url進行了調整。
2.后端要求給所有的請求頭部添加一個token, 或者對請求添加其他全局處理。
3.請求代碼直接寫在每個頁面里, 看起來代碼臃腫,不夠簡練,太難管理。
4.看到請求代碼, 不明白該請求是干嘛的,語義化不夠明顯。 ...
上面列舉的是一些常見的問題,如果沒對api進行封裝,當請求比較多的時候,修改起來欲哭無淚,解決這些問題可以進行以下操作
1.對axios進行二次封裝
2.對全部api請求也進行封裝
如下是對axios 進行二次封裝, 文件名是 network/index.js:
import axios from "axios"; import Cookies from "js-cookie"; // 設置超時時間 const myAxios = axios.create({ timeout: 5000 }); // 跳轉登錄頁面 function nav2Login() { location.href = '/xxxx/login' } // 添加一個請求攔截器 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); } ); // 添加一個響應攔截器 myAxios.interceptors.response.use( function(response) { // Do something with response data // 這里只是以200 401為示例, 其他狀態(tài)碼可以根據需要自行添加 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進行了封裝,文件名是 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í)行,避免出現白屏 return { status: 0, message: "網絡請求異常" }; }); } // 給函數命名的時候 盡量語義化 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, }
可以把這些請求掛載在一個全局的變量上, 以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項目中使用方法如下:
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 } }
補充知識:Vue項目中對axios進行封裝以及api接口請求
對axios進行封裝:
/* 定義一個ajax請求函數,并且其返回值: promise對象(異步返回的數據是: 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') { // 準備url query參數數據, let dataStr = '' //數據拼接字符串 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) { // 成功了調用resolve() resolve(response.data) }).catch(function (error) { //失敗了調用reject() reject(error) }) }) }
以上這篇結合axios對項目中的api請求進行封裝操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式
這篇文章主要介紹了Vite+TS+Vue開啟eslint和prettier規(guī)范及校驗方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue+ElementUI 關閉對話框清空驗證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關閉對話框清空驗證,清除form表單的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08