如何封装Vue Axios的http.js实现接口通用配置和拦截器操作？

本文共计827个文字，预计阅读时间需要4分钟。

创建一个简单的记录，在Vue项目中配置通用的HTTP请求：

javascript在Vue项目中配置通用的HTTP请求：

1. 在项目根目录下创建一个名为 `src/utils/http.js` 的文件。

2.在 `http.js` 文件中，引入axios库和Element UI的MessageBox和Message组件。

3.引入qs库用于数据格式化。

4.使用axios创建一个HTTP服务对象，并导出。

javascript

// src/utils/http.jsimport axios from 'axios';import { MessageBox, Message } from 'element-ui';import Qs from 'qs';

const http=axios.create({ baseURL: 'https://your-api-url.com', // 设置基础URL timeout: 10000 // 设置请求超时时间});

// 请求拦截器http.interceptors.request.use(config=> { // 在这里可以添加请求头或其他配置 return config;}, error=> { // 处理请求错误 return Promise.reject(error);});

// 响应拦截器http.interceptors.response.use(response=> { // 处理响应数据 return response;}, error=> { // 处理响应错误 if (error.response) { // 请求已发出，但服务器响应的状态码不在2xx范围内 Message.error(error.response.data.message || '请求失败'); } else if (error.request) { // 请求已发出，但没有收到响应 MessageBox.alert('请求超时，请稍后再试', '错误', { confirmButtonText: '确定' }); } else { // 发送请求时出了点问题 console.error('Error', error.message); } return Promise.reject(error);});

export default http;

5. 在需要使用HTTP请求的组件中，引入并使用 `http` 服务对象。

javascript// 在需要使用HTTP请求的组件中import http from '@/utils/http';

export default { methods: { fetchData() { http.get('/data') .then(response=> { // 处理响应数据 }) .catch(error=> { // 处理错误 }); } }};

做一下记录，在vue项目中配置公用的请求easy-mock.com/mock/' // 这是调用数据接口,公共接口url+调用接口名 let www.test.com' // 这是调用数据接口,公共接口url+调用接口名 } else if (localhost:8088/' } else { console.log('开发环境', 192.168.6.138:8080/' // 这是调用数据接口,公共接口url+调用接口名 } // ***.***.*.**:8080/', // 测试环境 timeout: 1000 * 10, // 请求超时的毫秒数,如果请求花费超过timeout的时间,请求将被中断 withCredentials: true, // 表示跨域请求时是否需要使用凭证,默认fasle headers: { 'Cache-Control': 'no-cache' } // 不允许缓存，需要重新获取请求 }) // 添加请求拦截器 service.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) }) // 添加响应拦截器 axios.interceptors.response.use(response => { // 对响应数据做点什么 return response }, error => { // 对响应错误做点什么 return Promise.reject(error) })

以上是对axios的初步封装，具体功能根据实际需求在service.js文件中进行配置

四、全局使用使用service(也可以局部使用,稍后会说明局部使用方法)

第一步：在main.js中进行挂载

import { service } from './service'

Vue.prototype.service = service

第二步：使用

// 注意：这里必须要使用async 和 await ，不然请求状态一直是Promise {<pending>},拿不到请求数据 async created () { let data = await this.service.get('menu/user/tree') console.log(data) //此时能拿到请求的数据 }

五、局部使用service,在组件内先引入再使用

<script> import { service } from '../service' export default { name: 'HelloWorld', data () { return { msg: 'sds' } }, async created () { let data = await service.get('menu/user/tree') console.log(data) } } </script>

以上这篇vue axios封装httpjs,接口公用配置拦截操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。