Vue專案api管理以及axios封裝請求

在平常開發中我們需要很多的網路請求，有的同乙個頁面有多個請求，在介面眾多情況下api管理愈發困難，維護及其不方便，下面我根據axios研究出乙個api管理方案，話不多說開始 ctrl+v

開始之前需要安裝axios 專案根目錄命令列輸入

npm

install axios -s

│─src           ---- src目錄

│  └─api	     ---- api目錄
│	 └────axios.js     ---- axios.js 檔案
│	 └────api.js       ---- api.js 檔案

import vue from 'vue'

import axios from 'axios'
import qs from 'qs'
// hideloading  載入元件和 showtoast 提示元件是 uni ui庫 可以自行修改
// 響應時間
axios.defaults.timeout = 5 * 1000
// 配置cookie
// axios.defaults.withcredentials =
true
// 配置請求頭
axios.defaults.headers.post[
'content-type']=
// 靜態資源
vue.prototype.$static=''
// 配置介面位址
//這裡的介面位址是你位址的相同的前半部分，方便管理
axios.defaults.baseurl =
''// post傳參序列化(新增請求***)
axios.interceptors.request.use(
config =
>);
if(config.method ==
='post'
)return config
},	err =
>);
return promise.reject(err)})
// 返回狀態判斷(新增響應***)
axios.interceptors.response.use(
res =
>
,	err =
>);
return promise.reject(err)})
// 傳送請求
export
function post(url, params)
,				err =
>
)			.catch(err =
>)}
)}export
function get(url, params)
)			.then(res =
>
)			.catch(err =
>)}
)}

import

from './axios.js'//引入封裝的檔案中的post方法
// params是介面所需引數 介面是get，post 請求介面，post請求，只需要將get(
)換成post(
)即可// '/api/recommend/index' 是介面後面部分  網域名稱配置檢視 ../axios.js 中的 axios.defaults.baseurl
//欄目分類標籤導航
export const columnindex = params =
> get(
'/api/column/index', params)
;// 首頁推薦
export const recommendindex = params =
> get(
'/api/recommend/index', params)
;// 首頁關注
export const recommendfollow = params =
> get(
'/api/recommend/follow', params)
;

// 按需引入 3介面

import
from '@/api/api.js'
;export default ,
methods:
//介面a
columnindex(
).then((res)
=>
)				
//介面b
recommendindex(parameter).then((res)
=>
)				//介面c
recommendfollow(
).then((res)
=>)}
}}

vue專案api介面管理

預設vue專案中已經使用vue cli生成，安裝axios，基於element ui開發，axiosconfig目錄和api目錄是同級，主要記錄配置的相關。import vue from vue import axios from axios import qs from qs import fro...

vue專案常用API

檔案 utils util.js const formattime date const formatnumber n function checkmobile mobile test mobile 驗證手機號 function password pws test pws 驗證密碼 return r...

vue專案封裝api介面（詳解）

在前端vue的開發中，有一點是必須要做的，那就是將所有的api介面封裝起來，因為從開發到最終上線的過程中，api是需要經常更換的，所以需要將api封裝起來，便於修改和更換。在所有的api中，每乙個api都會分成兩個部分，比如 這是分成基本路徑和最後的方法兩部分的，一般情況下如果需要更換api的時候，...