Vue中Axios封装API接口的思路及方法，有哪些最佳实践和技巧？

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

一、axios封装及在vue项目中使用

在vue项目中，我们通常使用axios库来与后台交互获取数据。axios是基于promise的http库，支持在浏览器端和node.js环境中运行。它具有许多优点，如拦截请求和响应、转换请求和响应数据等。

以下是一个简单的axios封装示例：

javascriptimport axios from 'axios';

// 创建axios实例const service=axios.create({ baseURL: 'https://api.example.com', // 设置基础URL timeout: 5000 // 设置请求超时时间});

// 请求拦截器service.interceptors.request.use( config=> { // 在这里可以添加请求头、参数等 return config; }, error=> { // 处理请求错误 return Promise.reject(error); });

// 响应拦截器service.interceptors.response.use( response=> { // 处理响应数据 return response.data; }, error=> { // 处理响应错误 return Promise.reject(error); });

// 导出axios实例export default service;

二、使用封装后的axios实例进行数据获取

javascriptimport axios from './axios.js';

// 获取数据axios.get('/data') .then(data=> { console.log(data); }) .catch(error=> { console.error(error); });

一、axios的封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的120.53.31.103:84/' } //在生产环境中的测试 production if(process.env.NODE_ENV == 'production') { axios.defaults.baseURL = 'wap.365msmk.com/' } //还有一种环境 debug

设置响应超时时间

通过axios.defaults.timeout设置默认的请求超时时间。如果超出了响应时间，就会告知用户当前请求超时，请刷新等等

//响应超时的时间 axios.defaults.timeout = 5000;

设置接口请求拦截

//接口请求拦截 axios.interceptors.request.use( config => { config.headers = { DeviceType : 'H5' } //设置响应头部 return config } )

使用promise返回axios请求的结果

post :

export function get(url,params){ return new Promise((resolve,reject) => { axios.get(url,{ params : params }).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }

get :

export function post(url,params){ return new Promise((resolve,reject) => { axios.post(url,params) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) }

这个时候，http.js里面的就写好了。下面就要去api.js去获取api接口了。

现在是api.js中的内容

首先是要在api.js中引入刚刚封装好的axios

import {get,post} from '../http/http.js' //get post 同时都要引入

然后就可以根据接口文档来进行数据的获取啦

//封装接口的方法 export function getAppIndex() { return get('api/app/recommend/appIndex') } export function getBanner() { return get('api/app/banner') } export function getTel() { return post('api/app/smsCode',{ //这里用的是params传参，直接写{}就可，不用再声明params啦 mobile : 18567391972, sms_type : 'login' }) }

再再然后，就可以去vue页面通过生命周期来获取数据啦。

再再再注意，这里不一定一定要使用async函数，这只是其中一种方法啦

async mounted() { // 明星讲师、精品课程等等 let res = await getAppIndex(); //添加到数组 this.startList = res.data.data.list // 轮播图列表 var banner = await getBanner(); // console.log('轮播图'+ banner) if (banner.data.code == 200) { this.bannerList = banner.data.data } // 手机验证码接口 let Tel = await getTel(); // console.log('手机验证码'+ Tel) // },

到此这篇关于详解Vue中Axios封装API接口的思路及方法的文章就介绍到这了,更多相关Vue Axios封装API接口内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！