vue axios封装

1.安装:

npm install --save axios

2.创建一个api文件夹,在api里创建一个https.js文件:

import axios from 'axios';

axios.defaults.timeout = 30000;


// 添加响应拦截器
axios.interceptors.response.use(function (response) {

    //可以写if判断,提前拦截错误信息

    return response;

}, function (err) {

    return Promise.reject(err);
});


export function apiGet(url, params){ 
	return new Promise((resolve, reject) =>{ 
		axios.get(url, { 
			params: params,
			herader:{"token":sessionStorage.getItem('token')}
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data) 
		}) 
   });
}


export function apiPost(url, params){
    return new Promise((resolve, reject) => {
			axios({
				method: 'post',
				url:url,
				data:params
			}).then(res => {
				resolve(res.data);
            }).catch(err =>{rejec
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用axios进行网络请求的封装可以提高代码的复用性和维护性,以下是一个简单的示例: 首先,安装axiosvue-axios库: ```bash npm install axios vue-axios ``` 接下来,在main.js中引入并注册这两个库: ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 然后,创建一个api.js文件用于封装axios的请求方法: ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 api.interceptors.request.use( config => { // 可以在请求发送之前做一些处理,例如添加请求头等 return config; }, error => { // 请求错误处理 return Promise.reject(error); } ); // 响应拦截器 api.interceptors.response.use( response => { // 可以在接收到响应数据后做一些处理,例如统一处理错误码等 return response.data; }, error => { // 响应错误处理 return Promise.reject(error); } ); export default { // 封装GET请求 get(url, params) { return api.get(url, { params }); }, // 封装POST请求 post(url, data) { return api.post(url, data); }, // 封装PUT请求 put(url, data) { return api.put(url, data); }, // 封装DELETE请求 delete(url) { return api.delete(url); }, }; ``` 现在,你可以在Vue组件中使用封装好的api.js文件进行网络请求了: ```javascript import api from './api.js'; export default { mounted() { this.getData(); }, methods: { async getData() { try { const res = await api.get('/data'); console.log(res); } catch (error) { console.error(error); } }, }, }; ``` 以上就是一个简单的Vue axios封装示例,你可以根据实际需求对其进行扩展和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值