模块化编程思想部分前后端,哈,道理都通
1、环境:
基于框架:vue
基于http库:axios
2、步骤
前提:使用vue脚手架创建一个项目或者基于已存在的项目测试
1,在工程目录中安装axios
npm install axios
2,在项目目录的src文件夹下新建utils文件夹,在该文件夹内新建http-service.js文件,内容如下代码块
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='http://XXX.XXX.XXX.XXX:9001'; //填写域名
//http request 拦截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
return config;
},
error => {
return Promise.reject(err);
}
);
//响应拦截器即异常处理
axios.interceptors.response.use(response => {
return response
}, err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('错误请求')
break;
case 401:
console.log('未授权,请重新登录')
break;
case 403:
console.log('拒绝访问')
break;
case 404:
console.log('请求错误,未找到该资源')
break;
case 405:
console.log('请求方法未允许')
break;
case 408:
console.log('请求超时')
break;
case 500:
console.log('服务器端出错')
break;
case 501:
console.log('网络未实现')
break;
case 502:
console.log('网络错误')
break;
case 503:
console.log('服务不可用')
break;
case 504:
console.log('网络超时')
break;
case 505:
console.log('http版本不支持该请求')
break;
default:
console.log(`连接错误${err.response.status}`)
}
} else {
console.log('连接到服务器失败')
}
return Promise.resolve(err.response)
})
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装patch请求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封装put请求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
3,在项目目录的src文件夹下新建api文件夹,在该文件夹内新建apiUser.js文件,此文件是各个模块调用后端接口的入口,如果模块多了可以分文件夹,这里只写了一个哦
内容如下代码块
import { fetch } from '@/utils/http-service'
/**
* 下面是获取数据的接口
*/
export default {
/**
* 接口XXX
* 参数:paramObj
* 方式:fetch/post/patch/put
*/
getAll: function(paramObj){
//return post('/api.php?ac=v2_djList',paramObj);
return fetch('/api/user/getAll');
}
// getById: (paramObj) => {
//return post('/api?ac=v2_djList',paramObj);
// return request.fetch('/api/user/getAll');
//}
//getAll: function(paramObj){
//return post('/api.php?ac=v2_djList',paramObj);
//return fetch('/api/user/getAll');
//},
}
4,测试使用
在你的vue中加入
<template>
...
</template>
<script>
//导入
import userRequest from '@/api/userApi'
export default {
methods: {
//findAll() {//查询所有
// this.$http.get("http://XXX.xxx.xxx.xxx:xxx/api/user/getAll").then((res) => {
//debugger;
// this.users = res.data;
// });
// },
findAll2: function(){
//this.$server.exam().then(data => {
// console.log(data);
// this.users = data;
// })
userRequest.getAll().then(data => {
console.log(data);
this.users = data;
})
}
}
</script>