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

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

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

npm install axios -S

1. 在src目錄下新建api目錄，用來存放封裝介面的js檔案，裡面再新建分別新建 api.js ，axios.js

目錄結構為

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

2.在api/axios.js檔案中寫入程式碼：(uni-app為例)

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'] = 'application/x-www-form-urlencoded'
// 靜態資源
Vue.prototype.$static = ''
// 設定介面地址
//這裡的介面地址是你地址的相同的前半部分，方便管理
axios.defaults.baseURL = 'https://www.baidu.com'

// POST傳參序列化(新增請求攔截器)
axios.interceptors.request.use(
	config => {
		uni.showLoading({
			title: '載入中...'
		});

		if (config.method === 'post') {
			config.data = qs.stringify(config.data)
		}
		return config
	},
	err => {
		uni.hideLoading();
		uni.showToast({
			title: '請求錯誤',
			duration: 2000,
			icon: "none"
		});
		return Promise.reject(err)
	}
)
// 返回狀態判斷(新增響應攔截器)
axios.interceptors.response.use(
	res => {
		uni.hideLoading();
		return res
	},
	err => {
		uni.hideLoading();
		uni.showToast({
			title: '請求失敗，請稍後再試',
			duration: 2000,
			icon: "none"
		});

		return Promise.reject(err)
	}
)
// 傳送請求
export function post(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.post(url, params)
			.then(
				res => {
					resolve(res.data)
				},
				err => {
					reject(err.data)
				}
			)
			.catch(err => {

			})
	})
}
export function get(url, params) {
	return new Promise((resolve, reject) => {
		axios
			.get(url, {
				params: params
			})
			.then(res => {
				resolve(res.data)
			})
			.catch(err => {

			})
	})
}

3.封裝的部分寫完之後，就是對api的統一管理了，api.js中是對介面的統一管理，寫入程式碼：、

import {post,get} 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);

4.到此封裝和api的管理就告一段落了，下面可以直接在頁面中使用，比如在頁面中呼叫剛剛的api.js中介面的話，就可以這樣寫：

// 按需引入 3介面
import {recommendFollow,recommendIndex,columnIndex} from '@/api/api.js';
export default {
	onLoad() {
		 this.getData()
	},
	methods:{
	getData(){

				let parameter = {
					city_name:this.City
				}
				//介面A
				columnIndex().then((res)=>{
					console.log(res);
				})
				
				//介面B
				recommendIndex(parameter).then((res)=>{
					
						console.log(res);
					
				})

				//介面C
				recommendFollow().then((res)=>{
					console.log(res);
				})

			}
	}
}

好了，就是這些了。