每天记录一个知识点（vue axios请求封装）

vue api请求统一管理，封装

不废话直接上demo（打卡：2020-12-23 ）

一、安装axios

cnpm install axios 

二、目录结构he代码

user.js

	import base from '../base'; // 导入接口域名列表
	import request from '../http'; // 导入http中创建的axios实例
	
	const user = {
	  //普通json请求
	  test1(url, params) {
	    return request.post(`${base.BASE_URl}${url}`, params)
	  },
	  //普通json请求，请求URL统一管理
	  test2(params) {
	    return request.post(`${base.BASE_URl}${'post'}`, params)
	  },
	  //FormData 表单请求
	  test3(params) {
	    var form = new FormData();
	    form.append("requestSystem", "");
	    form.append("requestUri", "/post");
	    form.append('requestData[page]', params.page);
	    form.append('requestData[size]', params.size);
	    return request.post(`${base.BASE_URl}`, form)
	  }
	};
	export default user;

base.js

	**
	 * 接口域名的管理
	 */
	const base = {
	  // 配置跨域
	  // BASE_URl: '/api',
	  // 测试环境
	  BASE_URl: 'http://httpbin.org/',
	  // 正式环境
	  // BASE_UR: 'https://xxx.com'
	};
	export default base;

http.js

	import axios from 'axios';
	import router from '../router';
	import store from '../store/index';
	import {
	  Message,
	  Loading
	} from 'element-ui';
	
	const toLogin = () => {
	  router.replace({
	    path: '/login',
	    query: {
	      redirect: router.currentRoute.fullPath
	    }
	  });
	}
	
	// 全局加载
	let loadingNum = 0,
	  loading;
	
	function startLoading() {
	  if (loadingNum == 0) {
	    loading = Loading.service({
	      lock: true,
	      text: "拼命加载中...",
	      spinner: "el-icon-loading",
	      background: "rgba(0, 0, 0, 0.7)"
	    });
	  }
	  loadingNum++;
	}
	
	function endLoading() {
	  loadingNum--;
	  if (loadingNum <= 0) {
	    loading.close();
	  }
	}
	
	
	
	const errorHandle = (status, other) => {
	  // 状态码判断
	  switch (status) {
	    // 401: 未登录状态，跳转登录页
	    case 401:
	      toLogin();
	      break;
	      // 403 token过期
	      // 清除token并跳转登录页
	    case 403:
	      Message.error('登录过期，请重新登录');
	      localStorage.removeItem('token');
	      // store.commit('loginSuccess', null);
	      setTimeout(() => {
	        toLogin();
	      }, 1000);
	      break;
	      // 404请求不存在
	    case 404:
	      Message.error('请求的资源不存在');
	      break;
	    case 405:
	      Message.error('请求405');
	      break;
	    default:
	      Message(other);
	  }
	}
	// 创建axios实例
	var instance = axios.create({
	  timeout: 1000 * 10
	});
	// 设置post请求头
	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
	
	instance.interceptors.request.use(
	  config => {
	    startLoading()
	    // 这里添加请求头信息
	    // config.headers['token'] = store.getters.token
	    return config;
	  },
	  error => Promise.error(error))
	
	// 响应拦截器
	instance.interceptors.response.use(
	  // 请求成功
	  res => {
	    endLoading()
	    // if (res.status == 200) {
	    return Promise.resolve(res.data)
	    // } else {
	    //   return Promise.reject(res.data)
	    // }
	  },
	  // 请求失败
	  error => {
	    const {
	      response
	    } = error;
	    endLoading()
	    if (response) {
	      // 请求已发出，但是不在2xx的范围 
	      errorHandle(response.status, response.data.message);
	      return Promise.reject(response);
	    } else {
	      // 处理断网的情况
	      if (!window.navigator.onLine) {
	        console.log('网络异常')
	      } else {
	        console.log(222)
	        return Promise.reject(error);
	      }
	    }
	  });
	
	export default instance;

index.js

	import user from './api/user'
	export default {
	  user
	}

三、main.js 引用

	import http from './http/index';
	Vue.prototype.$http = http;

四、使用

	<template>
	  <div>
	    <el-button @click="test1">json请求1</el-button>
	    <el-button @click="test2">json请求2</el-button>
	    <!-- <el-button @click="test3">json请求3</el-button> -->
	  </div>
	</template>
	
	<script>
	import { apiAddress } from "../../http/api/user";
	export default {
	  data() {
	    return {};
	  },
	
	  methods: {
	    // 请求url（post） 写在组件里
	    test1() {
	      this.$http.user
	        .test1('post',{
	          page: 1,
	          size: 3
	        })
	        .then(res => {
	          console.log("123", res);
	          this.$message.success('请求成功')
	        })
	    },
	    // url 统一管理
	    test2() {
	      this.$http.user
	        .test2({
	          page: 1,
	          size: 3
	        })
	        .then(res => {
	          console.log("123", res);
	           this.$message.success('请求成功')
	        })
	    },
	    // 表单提交形式,此接口不是真实接口，只是写法demo
	    test3() {
	      this.$http.user
	        .test3({
	          page: 1,
	          size: 3
	        })
	        .then(res => {
	          console.log("123", res);
	           this.$message.success('请求成功')
	        })
	    },
	  }
	  //created(){}
	};
	</script>
	<style lang="less" scoped></style>

笔记：

webpack官网

vue-axios官网

github dome