失恋日记吉他谱,傲龙猎花香,麦加美汉堡加盟
第一步还是先下载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+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论