怎么封装axios请求接口-开发者知识库平台

怎么封装axios请求接口

axios

1369

2024/1/11 0:41:13

栏目: 编程语言

要封装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等，以方便在项目中使用。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

怎么封装axios请求接口

最新知识库

相关标签