在平常開發中我們需要很多的網路請求，有的同一個頁面有多個請求，在介面眾多情況下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);
})
}
}
}
好了，就是這些了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/168688.html
標籤：其他