温馨提示×

怎么封装axios请求接口

小亿
85
2024-01-14 00:41:13
栏目: 编程语言

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

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

或者

yarn add axios
  1. 创建一个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;
  1. 使用封装的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等,以方便在项目中使用。

0