下面vue.js教程栏目带大家了解一下vue中axios的封装。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
vue中axios的封装
第一步还是先下载axios
cnpm install axios -S
登录后复制
第二步建立一个htttp.js
立即学习“前端免费学习笔记（深入）”；
import axios from 'axios';import { Message } from 'element-ui';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦截器axios.interceptors.request.use( config => { // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } // if(token){ // config.params = {'token':token} // } return config; }, error => { return Promise.reject(err); });//http response 拦截器axios.interceptors.response.use( response => { if(response.data.errCode ==2){ router.push({ path:"/login", query:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error => { return Promise.reject(error) })/** * 封装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) }) })}
登录后复制
第三步
在main.js中引入
import axios from 'axios'import {post,fetch,patch,put} from './utils/http'//定义全局变量Vue.prototype.$post=post;Vue.prototype.$fetch=fetch;Vue.prototype.$patch=patch;Vue.prototype.$put=put;
登录后复制
最后在组件里直接使用
mounted(){ this.$fetch('/api/v2/movie/top250') .then((response) => { console.log(response) }) },//其余的方法一样
登录后复制
相关推荐：2020年前端vue面试题大汇总（附答案）vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：vue.js教程！！
以上就是浅谈vue中axios的封装的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3023011.html
