下面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中axios的封装的详细内容。