vue 項目接口管理的實現(xiàn)
在vue開發(fā)中,會涉及到很多接口的處理,當項目足夠大時,就需要定義規(guī)范統(tǒng)一的接口,如何定義呢?
方法可能不只一種,本文使用axios+async/await進行接口的統(tǒng)一管理
本文使用vue-cli生成的項目舉例
舉例
拿segmentfault的官網(wǎng)簡單舉個例子,先看一下官網(wǎng)
看下網(wǎng)站,腦補一下后臺給出的文檔,如果后臺不傻的話給出的文檔肯定分模塊的,假設(shè)后臺給出的文檔分為了以下幾個模塊(假設(shè)的,不要較真哈)
- 資訊模塊 (我的訂閱、熱門資訊)
- 問答模塊
- 專欄模塊
- 講堂模塊
- 圈子模塊
- 發(fā)現(xiàn)模塊
- 個人信息模塊
- 用戶登錄注冊模塊
- ...還有其他很多
一般來說,網(wǎng)站的首頁都是復(fù)雜的,會用到很多其他頁面也會用到api,所以接口統(tǒng)一管理可以做到api的復(fù)用
那么如何做呢?
動手
1.首先,在src目錄下新建一個文件夾,我這里叫apis,后臺提供的所有接口都在這里定義
cd src #切換到src目錄 mkdir apis #新建apis文件
2.第二步,按照后臺文檔劃分的模塊新建js文件,這里簡單舉個例子
- 資訊模塊: info.js
- 登錄注冊模塊: member.js
- 個人信息模塊 user_info.js
- ....
cd apis #切換到apis目錄 touch info.js member.js user_info.js #新建js文件
現(xiàn)在的目錄大概是這個樣子
src apis info.js member.js user_info.js main.js
3.第三步,需要引入axios做相應(yīng)的配置
在apis下新建一個文件夾,叫http.js,在里面做axios相應(yīng)的配置
touch http.js //新建http.js文件
配置如下:
import axios from 'axios' //創(chuàng)建axios的一個實例 var instance = axios.create({ baseURL:xxx, timeout: 6000 }) //------------------- 一、請求忽略 instance.interceptors.request.use(function (config) { return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); instance.interceptors.response.use(function (response) { return response.data; }, function (error) { // 對響應(yīng)錯誤做點什么 return Promise.reject(error); }); export default function (method, url, data = null) { method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{ console.error('未知的method'+method) return false } }
配置簡要說明一下:
- 引入axios,新建了個axios的實例(axios的實例的axios的功能一樣)
- 第30行代碼及以后是重點,拉出來重點看一下
/** * 使用es6的export default導(dǎo)出了一個函數(shù),導(dǎo)出的函數(shù)代替axios去幫我們請求數(shù)據(jù), * 函數(shù)的參數(shù)及返回值如下: * @param {String} method 請求的方法:get、post、delete、put * @param {String} url 請求的url: * @param {Object} data 請求的參數(shù) * @returns {Promise} 返回一個promise對象,其實就相當于axios請求數(shù)據(jù)的返回值 */ export default function (method, url, data = null) { method = method.toLowerCase(); if (method == 'post') { return instance.post(url, data) } else if (method == 'get') { return instance.get(url, { params: data }) } else if (method == 'delete') { return instance.delete(url, { params: data }) }else if(method == 'put'){ return instance.put(url,data) }else{ console.error('未知的method'+method) return false } }
4.第四步、在apis下面的js文件中引入http.js導(dǎo)出的函數(shù),拿其中一個文件member.js
說明
//member.js 用于定義用戶的登錄、注冊、注銷等 import req from './http.js' //定義接口 //在這里定義了一個登陸的接口,把登陸的接口露出去給組件使用 export const LOGIN =params=>req('post','/operator/login',params) //這里使用了箭頭函數(shù),轉(zhuǎn)換一下寫法: //export const LOGIN=function(req){ // return req('post','/operator/login',params) //} //定義注冊接口 export const REG =params=>req('post','/operator/reg',params) //定義注銷接口 export const LOGOUT =params=>req('post','/operator/logout',params)
5.第五步,在組件中使用接口
登陸組件Login.js使用登錄接口
//Login.vue <template> <div> <input type='text' v-modal='user.userId'> <input type='text' v-modal='user.pass'> </div> </template> <script> //1. 引入登錄的接口定義 import {LOGIN} from '../../apis/user.js' export default{ data(){ return { user:{ userId:'', pass:'' } } }, methods{ //2. 定義登錄的邏輯 async login(){ //2.1 awiat LOGIN(this.user) //等待LOGIN(this.user)執(zhí)行完, //把返回值給user_info let user_info=await LOGIN(this.user) //2.2假設(shè)登錄成功,返回的數(shù)據(jù)應(yīng)該是 //user_info={code:200,msg:'success',data:{token:'xxxxx'}} //然后根據(jù)返回的數(shù)據(jù)做相應(yīng)的處理,比如儲存token } }, mounted(){ //3. 執(zhí)行登錄 this.login() } } </script>
6.這樣定義接口雖然看起來麻煩點,但有以下幾個好處:
代碼看起來規(guī)范,所有的接口都在一個文件夾定義,不用分散的各個組件,維護起來簡單,例如后臺的一些url變了,改起來也方便
可以做到接口一次定義,到處使用
例如首頁使用了很多api
//index.js 首頁的js文件 import {GET_USER_INFO} from 'apis/user_info.js' //用戶信息 import {GET_CURRENT_INFO,GET_HOT_INFO} from 'apis/info.js' //熱門資訊 最新資訊 import {GET_HOT_LECTRUE} from'apis/lectrue.js' //講座推薦
用戶界面也會用到用戶信息api
//user_info.js用戶信息頁面 import {GET_USER_INFO} from 'apis/user_info.js' //用戶信息
就先寫到這里了,如有錯誤,請在評論區(qū)指正,下次整理下用戶權(quán)限相關(guān)的內(nèi)容,包括jwt,token保存和更新,頁面權(quán)限問題
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法
今天小編就為大家分享一篇vue forEach循環(huán)數(shù)組拿到自己想要的數(shù)據(jù)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09五步教你用Nginx部署Vue項目及解決動態(tài)路由刷新404問題
nginx 是一個代理的服務(wù)器,下面這篇文章主要給大家介紹了關(guān)于如何通過五步教你用Nginx部署Vue項目及解決動態(tài)路由刷新404問題的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-12-12