怎么在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",     querry:{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)    })  }, 其余的方法一样

关于怎么在vue中封装axios问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。