浅谈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的封装的详细内容，更多内容请关注技术你好其它相关文章！