1.前言。
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。更多详情,请移步
2.源码。
话不多说,先上完整代码链接.
3.项目结构。
4.主要步骤
安装axios依赖：
- src下新建api文件夹,用于存放axios的相关封装及其衍生api文件等。
- api文件夹内创建request.js文件来创建axios实例及拦截等(附上主要代码,重点部分均有注释,elm组件库记得安装哦)。
js
体验AI代码助手
代码解读
复制代码
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
- 创建xx.js文件用于具名模块的api统一管理和之后对应页面的调用
js
体验AI代码助手
代码解读
复制代码
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)
}
- 在上一步的对应组件内引用并使用即可。
js
体验AI代码助手
代码解读
复制代码
点击
5.结语 以上是在vue中最简单的封装和使用,也是方便api接口的统一管理.更多更全面的封装及逻辑请前往查看对应API。
