1.在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。更多详情,请移步axios官网.
2.话不多说,先上完整代码链接.GitHub代码 (如因网络等原因打不开GitHub,请移步码云代码).
3.整体结构示意图:
4.主要步骤:
4.1: 安装axios依赖:
npm install axios
4.2:src下新建api文件夹,用于存放axios的相关封装及其衍生api文件等.
4.3:创建request.js文件来创建axios实例及拦截等(附上主要代码,重点部分均有注释,elm组件库记得安装哦).
import axios from 'axios';
import { Message } from "element-ui";
let baseURL = 'http://112.5.154.242:61901/' //接口请求的域名(生产和测试环境一般不同)
/**
* 请求类型为post时请求头的请求类型默认为{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}
* 可按实际修改为{headers: {'Content-Type': 'application/json; charset=UTF-8'}}或者{headers: {'Content-Type': 'multipart/form-data; charset=UTF-8'}} 跟在传参后
* 列如:
* export function postHome(data){
return server.post('Home/BlocManage/auth',data,{headers: {'Content-Type': 'multipart/form-data; charset=UTF-8'}})
}
*/
const server = axios.create({ //创建axios实例
baseURL: baseURL,
timeout: 80000,
})
// 添加请求拦截器
server.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
console.log(1,config);
// config.headers.token = '7b569b6b1660fa23162567d0c35ad51a' //一般是判断是否存在token后再决定头部是否添加token
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
server.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log(2,response);
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
// return response;
}, function (error) {
// 对响应错误做点什么
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
// router.replace({
// path: '/login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Message.error('登录过期,请重新登录');
// 清除token
localStorage.removeItem('token');
// store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
// router.replace({
// path: '/login',
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
}, 1000);
break;
// 404请求不存在
case 404:
Message.error('网络请求不存在');
break;
// 其他错误,直接抛出错误提示
default:
Message.error(error.response.data.message);
}
return Promise.reject(error.response);
}
// return Promise.reject(error);
});
export default server
4.4: 创建xx.js文件用于具名模块的api统一管理和之后对应页面的调用.
import server from '@/api/request';
/**
* get请求 获取用户
*/
export function getHome(data){ //get请求传参
return server.get('Home/BlocManage/getAuthUserList', {params:data})
}
/**
*post请求 授权用户
*/
export function postHome(data){ //post请求传参
return server.post('Home/BlocManage/auth', data)
}
4.5:在4.4对应组件内引用并使用即可.
<template>
<div class="home">
<el-button type="primary" @click="postHome">点击</el-button>
</div>
</template>
<script>
import * as API from '@/api/pageRequest/home'; //引入API
export default {
name: "Home",
data(){
return {
producerSn: '',
blocCode: 'FXFT_0591591000',
userids: '775'
}
},
methods: {
getHome(){
let data = new URLSearchParams()
if(this.producerSn){
data.append('producerSn',this.producerSn)
}
API.getHome(data).then(res => {
if(res.data.code == 200){
console.log(res);
}else{
console.log(res.msg);
}
}).catch(err => {
console.log(err.msg);
})
},
postHome(){
let data = new URLSearchParams()
data.append('blocCode',this.blocCode)
data.append('userids',this.userids)
if(this.producerSn){
data.append('producerSn',this.producerSn)
}
API.postHome(data).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
}
},
created(){
this.getHome()
}
};
</script>
5.说明:以上是axios在vue中最简单的封装和使用,也是方便api接口的统一管理.更多更全面的封装及逻辑请前往axios官网查看对应API.