vue中axios的二次封装

vue中axios的二次封装

封装

1. src目录下新建 api 文件夹
2. api文件夹下新建 http.js 文件

import axios from "axios"
import qs from "qs"		// 这是前端的一个js库，不清楚的百度

// 根据环境变量区分接口的默认地址
// switch(process.env.NODE_ENV) {
//   case "production": 
//     axios.defaults.baseURL = "";
//     break;
//   case "test":
//     axios.defaults.baseURL = "";
//     break;
//   default: 
//     axios.defaults.baseURL = ""
// }
axios.defaults.baseURL = "/api"  // 我这里是解决了一下跨域，不清楚的看我之前的博客，怎样解决跨域
// 设置超时时间和跨域是否允许携带凭证
axios.defaults.timeout = 10 * 1000;
// axios.defaults.withCredentials = true;
// 设置请求传递数据的格式(看服务器要求怎么写)
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data => qs.stringify(data);

// 设置请求拦截器
// 客户端发送请求 -> [请求拦截器] -> 服务器
// TOKEN校验 接收服务器返回的token 存储到vuex/本地存储中 每一次向服务器发请求，我们应该把token带上
axios.interceptors.request.use(config => {
	// 携带上token
	let token = localStorage.getItem('token');
	token && (config.headers.Authorization = token);
	return config;
},error => {
		return Promise.reject(error)
});
// 设置响应拦截器
// 服务器返回信息 -> [拦截的统一处理] ->客户端js获取信息
axios.interceptors.response.use(response => {
    // 返回数据
	return response.data;
},error => {
	let { response } = error;
	if(response){
		// 服务器最起码返回了结果
        // 具体还是和后端商量好
		switch(response.status) {
			case 401:		// =>权限
				break;
			case 403:		// =>服务器拒绝执行（token过期）
				break;
			case 404:		// =>找不到页面
				break;
		}
	} else {
		// 服务器连结果都没有
		if(!window.navigator.onLine) {
			// 这里可以断网处理：可以跳转到断网页面
			return;
		}
		return Promise.reject(error);
	}
});

export default axios;

根据环境变量区分接口的默认地址在package.json文件里配置

像test和production可以自己定义，并不是一定叫这个。

平常我们跑项目都是

npm run serve

我们配置好了以后可以这样，这样就可以调用不同的baseUrl，来区分测试环境，生产环境，开发环境

npm run serve:test

npm run serve:production

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "set NODE_ENV=test&&vue-cli-service serve",
    "serve:production": "set NODE_ENV=production&&vue-cli-service serve",
    "build": "vue-cli-service build"
  },

这样就封装好了

使用

哪里需要哪里使用，我个人的习惯如下。

场景：index首页需要请求数据

1. api文件夹下新建index.js

// 首页网络请求相关方法
import axios from "./http";
function Creative() {
  return axios.get("/beibei/Creative");
}
function Cases(id,num) {
  return axios.get(`/beibei/Cases?id=${id}&num=${num}`);
}
function Dynamic(data) {
  return axios.post("/beibei/Dynamic",data);
}
export default {
  Creative,
  Cases,
  Dynamic,
};

2. api文件夹下新建api.js

// 这里是数据请求的唯一路口
// 导入请求
// 首页
import Dynamic from "./index";
import Creative from "./index";
import Cases from "./index";
export default {
  // 首页接口
  Creative,
  Cases,
  Dynamic,
}

3. 在src目录下的main.js中挂载

// 将 api 唯一路口文件导入，挂载到原型
import api from "./api/api"; 
Vue.prototype.$api = api;

4. 在index.vue中使用

<template></template>
<script>
  export default {
    name: 'index',
    created() {
      this._Cases(1,1);
      this._Creative();
    },
    methods: {
      _Cases(id,num) {
        this.$api.Cases.Cases(id,num).then(res => {
          console.log(res)
        })
      },
      _Creative() {
        this.$api.Creative.Creative().then(res => {
          console.log(res)
        })
      },
      _Dynamic(data) {
        this.$api.Dynamic.Dynamic(data).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>
<style></style>

axios如何解决跨域看我另一篇博客 如何解决vue项目(cli3以上)中的跨域问题(axios版)

本文地址：https://blog.csdn.net/Kavii_a/article/details/112567935