vue中封装axios请求

1、下载axios

cnpm install axios -S

2、在src下建立个utils文件夹，里面建立一个http.js

import axios from 'axios';
import { MessageBox } from 'element-ui';
import md5 from "js-md5";
import router from '../router';
axios.defaults.timeout = 10000;
axios.defaults.baseURL ='http://8080';  //请求地址

//http request 拦截器
axios.interceptors.request.use(  config => { 
     config.data = JSON.stringify(config.data);  
  if (config.method == 'get') {  
    config.headers = {     
   'Content-Type': 'application/x-www-form-urlencoded',  
      'Access-Control-Allow-Origin': '*',  
      token:localStorage.getItem('token')   //请求头带token    
  }  
  } else {   
   config.headers = {     
   'Content-Type': 'application/json;charset=UTF-8',  
      'Access-Control-Allow-Origin': '*',   
     token:localStorage.getItem('token')   //请求头带token 
   }  
  }   
 return config; 
 },  
error => {  
  return Promise.reject(err); 
 }
);


//http response 拦截器
axios.interceptors.response.use( 
 response => {   
  console.log(response.data.code)  
 if (response.data.code == 100402) {   
    MessageBox.alert(response.data.msg, '提示', {   
     confirmButtonText: '确定',     
   callback: () => {      
    router.push({ path: "/pages/login" })     
                           }    
  })            
              }  
  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)     
 }) 
 })
}


//excel导出请求
export function postResponseFile(url, data = {}) { 
 return new Promise((resolve, reject) => {  
  axios.post(url, data, {responseType: "blob"}) 
     .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)    
  }) 
 })
}

3、在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;

4、在页面中直接使用

  methods: {   
 
     function () {     
          this.$post("请求URL", {   
           //请求参数    
        })      
         .then(function (response) {    
            //成功回调       
        })       
          .catch(function(err){    
              //失败回调      
        })     
     }  
   }