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);	
			})
		}
	}
}
  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值