封装一下axios！

先去官方文档康康----》起步 | Axios 中文文档 | Axios 中文网

Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

• 从浏览器创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

第一步：

肯定是先安装系不系咯！

npm（其他的懒得写）

npm install axios

任君挑选：

第二步：引入

1.新建一个文件夹request里面有两个文件，api.js（介个里面要放的是统一管理的接口）、http.js（介个那肯定是封装axios的地方啵）

在http.js文件夹里面： 

认真看看代码别直接cv大法！！！

//引入
import axios from 'axios';
//这里引入element-ui里面的消息提示组件
import { Message } from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

// console.log(process.env.NODE_ENV);
// console.log(process.env.VUE_APP_BaseURL);

const service = axios.create({
	baseURL: process.env.VUE_APP_BaseURL,//基准地址
	timeout: 6000    //设置请求超时
});

// axios
// axios.get  axios.post
// axios({})


//添加请求拦截器，不懂看官方文档
service.interceptors.request.use(
	(config) => {
		// console.log(config);
		if (localStorage.getItem('token')) {
			config.headers['Authorization'] = localStorage.getItem('token');
		}

		return config;
	},
	(error) => {
		// 对请求错误做些什么
		return Promise.reject(error);
	}
);
//添加响应拦截器
service.interceptors.response.use(
	(response) => {
		// console.log(response);
		return response;
	},
	(error) => {
		console.log(typeof error); //timeout of 6000ms exceeded
		// return Promise.reject(error);
		if (error.response.status) {
			switch (error.response.status) {
				// 401: 未登录
				// 未登录则跳转登录页面，并携带当前页面的路径
				// 在登录成功后返回当前页面，这一步需要在登录页操作。
				case 401:
					Message({
						showClose: true,
						message: '未授权',
						type: 'error',
						duration: 3000
					});
					break;

				// 403 token过期
				// 登录过期对用户进行提示
				// 清除本地token和清空vuex中token对象
				// 跳转登录页面
				case 403:
					// console.log("403")
					Message({
						showClose: true,
						message: '被禁止访问',
						type: 'error',
						duration: 3000
					});

					break;

				// 404请求不存在
				case 404:
					Message({
						showClose: true,
						message: '请求的资源不存在',
						type: 'error',
						duration: 3000
					});

					break;
				// 其他错误，直接抛出错误提示
				default:
					Message({
						showClose: true,
						message: '其他的错误',
						type: 'error',
						duration: 3000
					});
			}
			return Promise.reject(error.response);
		}
	}
);

// 封装get请求
export function get(url, data = {}) {
	return service.get(url, { params: data });
}

//封装post请求
export function post(url, params = {}) {
	return service.post(url, params);
}
//封装put请求
export function put(url, params = {}) {
	return service.put(url, params);
}
//封装delete请求
export function deletefn(url, params = {}) {
	return service.delete(url, params);
}

export default service;

 api.js：

import request from './http.js';

const MainApi = {
	// MainBanner:function(p){
	// 	return  request.post('/nav',p)
	// },
	// MainProduct:function(p){
	// 		return request.get("/product/getHomeProducts",p)
	// }

	Login: function (p) {
		return request({
			url: '/login',
			method: 'post',
			data: p
		});
	},
	getMenu: function () {
		return request({
			url: '/menus',
			method: 'get'
		});
	},
}

export default MainApi;

如何在组件里面调用

打个样其他的全部靠悟性！

 MainApi.Login(this.ruleForm).then((res) => {
console.log(res);
}

如果有任何错误不足和不懂的，请大家评论留言多多关照！！！

还是看不懂，可以看看这个vue中Axios的封装和API接口的管理 - 掘金