在vue開發中，會涉及到很多接口的處理，當項目足夠大時，就需要定義規范統一的接口，如何定義呢？
方法可能不只一種，本文使用axios+async/await進行接口的統一管理
本文使用vue-cli生成的項目舉例
舉例
拿segmentfault的官網簡單舉個例子，先看一下官網
看下網站，腦補一下后臺給出的文檔，如果后臺不傻的話給出的文檔肯定分模塊的，假設后臺給出的文檔分為了以下幾個模塊（假設的，不要較真哈）
一般來說，網站的首頁都是復雜的，會用到很多其他頁面也會用到api，所以接口統一管理可以做到api的復用
那么如何做呢？
動手
1.首先，在src目錄下新建一個文件夾，我這里叫apis，后臺提供的所有接口都在這里定義
cd src #切換到src目錄mkdir apis #新建apis文件
2.第二步，按照后臺文檔劃分的模塊新建js文件,這里簡單舉個例子
cd apis #切換到apis目錄touch info.js member.js user_info.js #新建js文件
現在的目錄大概是這個樣子
src apis info.js member.js user_info.js main.js
3.第三步，需要引入axios做相應的配置
在apis下新建一個文件夾,叫http.js,在里面做axios相應的配置
touch http.js //新建http.js文件
配置如下:
import axios from 'axios'//創建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) { // 對響應錯誤做點什么 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 }}配置簡要說明一下：
/** * 使用es6的export default導出了一個函數，導出的函數代替axios去幫我們請求數據， * 函數的參數及返回值如下： * @param {String} method 請求的方法：get、post、delete、put * @param {String} url 請求的url: * @param {Object} data 請求的參數 * @returns {Promise} 返回一個promise對象，其實就相當于axios請求數據的返回值 */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導出的函數，拿其中一個文件member.js說明
//member.js 用于定義用戶的登錄、注冊、注銷等import req from './http.js'//定義接口 //在這里定義了一個登陸的接口，把登陸的接口暴露出去給組件使用export const LOGIN =params=>req('post','/operator/login',params)//這里使用了箭頭函數，轉換一下寫法：//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)執行完, //把返回值給user_info let user_info=await LOGIN(this.user) //2.2假設登錄成功,返回的數據應該是 //user_info={code:200,msg:'success',data:{token:'xxxxx'}} //然后根據返回的數據做相應的處理，比如儲存token } }, mounted(){ //3. 執行登錄 this.login() } }</script>6.這樣定義接口雖然看起來麻煩點，但有以下幾個好處：
代碼看起來規范，所有的接口都在一個文件夾定義，不用分散的各個組件，維護起來簡單，例如后臺的一些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' //用戶信息就先寫到這里了，如有錯誤，請在評論區指正，下次整理下用戶權限相關的內容，包括jwt,token保存和更新,頁面權限問題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
