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

好了，就是这些了。

本文地址：https://blog.csdn.net/saadah/article/details/108974518