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);
				})

			}
	}
}

好了，就是这些了。