在平常开发中我们需要很多的网络请求,有的同一个页面有多个请求,在接口众多情况下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);
})
}
}
}
好了,就是这些了。