怎么封装axios请求接口

   2025-02-05 2460
核心提示:要封装axios请求接口,可以按照以下步骤进行操作:安装axios:使用npm或yarn安装axios库,可以在命令行中执行以下命令:npm inst

要封装axios请求接口,可以按照以下步骤进行操作:

安装axios:使用npm或yarn安装axios库,可以在命令行中执行以下命令:
npm install axios

或者

yarn add axios
创建一个api.js文件:在项目的src目录下创建一个名为api.js的文件,并在文件中引入axios库:
import axios from 'axios';// 创建axios实例const service = axios.create({  baseURL: 'http://api.example.com',  // 设置接口的基础url  timeout: 5000  // 设置超时时间});// 请求拦截器service.interceptors.request.use(  config => {    // 在发送请求之前可以进行一些处理,如添加token等    return config;  },  error => {    // 请求错误时的处理    return Promise.reject(error);  });// 响应拦截器service.interceptors.response.use(  response => {    // 对响应数据进行处理,如统一处理错误信息等    return response.data;  },  error => {    // 响应错误时的处理    return Promise.reject(error);  });export default service;
使用封装的axios接口:在需要使用axios请求接口的地方,可以引入api.js文件,并使用封装的axios接口进行请求操作,例如:
import api from './api';// 使用get请求api.get('/user')  .then(response => {    console.log(response);  })  .catch(error => {    console.log(error);  });// 使用post请求api.post('/user', { name: 'John' })  .then(response => {    console.log(response);  })  .catch(error => {    console.log(error);  });

这样就完成了封装axios请求接口的操作。在使用中,可以根据实际需要,进一步封装一些常用的请求方法,如get、post、put、delete等,以方便在项目中使用。

 
 
更多>同类维修知识
推荐图文
推荐维修知识
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  网站留言