杨浦区建设小学网站首页,建设银行代发工资网站,营销软文范例大全,网站广告通栏效果一、简介
Axios 是一个基于 promise 网络请求库#xff0c;作用于node.js 和浏览器中。
这是一个使用率很高的前端网络请求库#xff0c;几乎所有的前端项目都会使用#xff0c;本文主要介绍的是如何在vue项目中使用axios#xff0c;并对其进行全面的封装。
注意#x…一、简介
Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。
这是一个使用率很高的前端网络请求库几乎所有的前端项目都会使用本文主要介绍的是如何在vue项目中使用axios并对其进行全面的封装。
注意本文内容主要来自于个人开发经验如有不当之处敬请谅解也欢迎大家在评论区指出。
二、安装
使用 npm
npm install axios使用 bower
bower install axios使用 cdn
script srchttps://unpkg.com/axios/dist/axios.min.js/script安装完成后在main.js中引入axios
const axios require(axios);
Vue.prototype.$axios axios;三、封装
这里写的浅显直白点按照步骤一点一点完成即可顺利使用。
1. 第一步封装请求配置
在src/utils目录下创建fetch.js文件没有utils文件夹的可以自己创建。
// fetch.js
import router from ../router/index; // 引入路由token过期时返回登录页
import Cookies from js-cookie; // 引入Cookies插件用来存储token
import { Message } from element-ui; // 引入element插件进行错误提示看项目需求也可以不用const axios require(axios);
axios.defaults.headers[Content-Type] application/json;charsetUTF-8;const fetch axios.create({timeout: 60 * 1000, // 设置超时时间
});// 请求拦截器
fetch.interceptors.request.use((config) {const token Cookies.get(token) || ; // 设置tokenconfig.headers.common[Authorization] token;return config;},(error) {return Promise.reject(error);}
);// 响应拦截器
fetch.interceptors.response.use((res) {// 当content-download1进行文件下载判断条件与后端协商一致即可此处只是举例if (res.headers[content-download] 1) {return res; // 此处返回res是因为需要在headers中获取文件名} else {// 其它状态码可自行进行补充本文仅例举一项if (res.data.code 500) {return Promise.reject(res.data);} else {if (res.data.code 200) {return res.data;} else {return Promise.reject(res.data);}}}},(error) {const stateCode error.response.status;Toast.clear();if (stateCode 401 || stateCode 403) {Cookies.remove(token);Message.error(登录已失效请重新登录!);router.push(/login);}return Promise.reject(error);}
);export default fetch;
2. 第二步封装请求类型
在src/utils目录下创建request.js文件。
// request.js
import fetch from ./fetch;function request(url, method, data) {switch (method) {case get:return fetch({method: get,url,params: data,});case post:return fetch({method: post,url,data,});case download:return fetch({method: get,url,params: data,responseType: blob,});default:return fetch;}
}export default request;
注意download并非是请求类型只是为了方便区别下载文件个人添加的。
3. 第三步添加接口
在src/api目录下创建index.js文件没有api文件夹的可以自己创建。
// index.js
import request from /utils/request;export function login(data) {return request(/api/login, get, data);
}export function loginOut(data) {return request(/api/login-out, post, data);
}export function fileDownload(data) {return request(/api/file-download, download, data);
}注意这里的index.js命名并非唯一任意名称皆可建议不同模块采用不同的命名予以区分这样会方便管理。
到这一步所有的封装工作基本都已经完成了剩下的就是使用了。
四、使用
使用非常的简单在.vue文件中引入后就可以直接调用了。
script
import { login, loginOut, fileDownload } from /api/index;
export default {data() {return {form: {username: ,password: ,};},methods: {_login() {const data this.form;login(data).then((res) {this.$message.success(res.message)});},}
}
/script至此已完成axios在vue项目中的封装与使用。
