vue axios封装

vue中封装axios

第一步安装：npm install --save axios
第二步：创建一个api.js 文件,可在src的根目录下创建

代码如下（示例）：

import axios from 'axios';

// 超时设置，若30秒之后还在加载中，终止或跳转 
axios.defaults.timeout = 30000;


// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    //可以写if判断，提前拦截错误信息
    // console.log(response) //在获取的接口中的数据之前打印接口中的数据，所以可以在这里判断status状态码
    if(response.status==200){
        // this.$router.push({name:'home'})
      return response;
    }else if(response.status==404){
          alert('页面找不到了')
    }else if(response.status==500){
          alert('内部服务器错误')
    }

  }, function (err) {

    return Promise.reject(err);
});

//export 暴露，导出
export function apiGet(url, params){ 
	return new Promise((resolve, reject) =>{ 
		axios.get(url, { 
			params: params,
			herader:{"token":sessionStorage.getItem('token')}
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data) 
		}) 
   });
}

//export 暴露，导出
export function apiPost(url, params){
	return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url:url,
				data:params
			}).then(res => {
				resolve(res.data);
            }).catch(err =>{reject(err.data)})
        });
    }

第三步，在main.js 中声明

import {apiGet,apiPost} from './api/https'
Vue.prototype.$apiGet  = apiGet
Vue.prototype.$apiPost = apiPost

第四步，页面中使用

this.$apiGet
this.$apiPost