vue项目中axios封装（数据请求封装）

一、定义utils（工具类）目录，并创建两个文件，request.js与http.js

request.js

用于创建axios，并在请求/响应拦截时对需要传递的数据进行处理。

import axios from 'axios' // 使用前要先安装依赖：npm install axios

// 创建axios实例
const service = axios.create({ 
	// 这里可以放一下公用属性等。
	baseUrl: 'https://xxxx', // 用于配置请求接口公用部分，请求时会自动拼接在你定义的url前面。
	withCredentials： false, // 跨域请求时是否需要访问凭证
	timeout: 3 * 1000, // 请求超时时间
	headers: { // 请求头
		...
	}
})

// 请求拦截器
service.interceptors.request.use(config => {
	// 这里可以进行请求加密等操作。如添加token,cookie，修改数据传输格式等。
	config.headers['token'] = 'xxxx';
	config.headers['Content-type'] = 'application/json';
	return config;
})

service.interceptors.response.use(response => {
	// 请求成功进行的操作。// 可以使用switch/if...else对数据先进行处理。
	return response;
}, error => {
	// 请求失败进行的操作
	return error;
})

export default service;

http.js

import request from './request';

const http = {
	get(url, params, headers) {
		const config = {
			method: 'GET',
			url: url
			params: params ? params : {},
			headers: headers ? headers : {}
		}
		return request(config);	
	},
	post(url, data, headers) {
		const config = {
			method: 'POST',
			url: url
			data: data ? data : {},
			headers: headers ? headers : {}
		}
		return request(config);	
	}
}

二、定义存放接口目录(api)，假设首页需请求接口，添加home.js

home.js

import http from '@/utils/http';

export function homeData(parmas){
	return http.get('/api/list', params, headers数据)
}

三、home.vue文件中使用。

import { homeData } from '@/api/home.js'
export default {
	methods: {
		fn() {
			const params = {
				...	
			}
			homeData(params).then(res => {
				console.log(res);	
			}).catch(err => {
				console.log(err);	
			})
		}
	}
}