前端axios的封装

前端axios的封装是为了提高开发效率和方便维护而进行的。通常，我们可以将axios进行封装，创建一个http目录，并在其中创建一个helper.js文件来实现功能性的封装。在helper.js文件中，我们可以定义一些常用的API接口、拦截器、错误处理等功能。封装的好处是可以将通用的请求逻辑提取出来，减少代码冗余，并且可以在以后的项目中直接复用。

值得注意的是，在封装axios时，我们可以参考其他人的经验和方法，例如在https://www.jianshu.com/p/eb325d70990b中有一篇非常详细的博文，可以作为参考。

相关问题

前端axios方法封装

axios是一个基于Promise的HTTP客户端，可以用在浏览器和Node.js环境中。在前端开发中，我们常常需要进行网络请求，为了提高代码的复用性和可维护性，我们可以将axios方法封装起来。

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

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://api.example.com', // API请求的默认前缀
  timeout: 10000 // 请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

export default {
  // 封装get方法
  get(url, params) {
    return new Promise((resolve, reject) => {
      instance.get(url, {
        params: params
      }).then(response => {
        resolve(response.data)
      }).catch(error => {
        reject(error)
      })
    })
  },
  // 封装post方法
  post(url, data) {
    return new Promise((resolve, reject) => {
      instance.post(url, data).then(response => {
        resolve(response.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

在上面的代码中，我们使用axios.create()方法创建了一个axios实例，设置了请求的默认前缀和超时时间，然后定义了请求拦截器和响应拦截器，用来在请求发送前和响应返回后进行一些公共的处理。最后，我们封装了get和post方法，用来发送get和post请求，并返回一个Promise对象。

使用方法如下：

import http from './http'

// 发送get请求
http.get('/user', { id: 1 }).then(data => {
  console.log(data)
}).catch(error => {
  console.log(error)
})

// 发送post请求
http.post('/login', { username: 'admin', password: '123456' }).then(data => {
  console.log(data)
}).catch(error => {
  console.log(error)
})

这样，我们就可以在项目中方便地调用封装好的axios方法，而且也方便维护和修改。

axios封装

axios是一个http请求库，可以用于发送http请求。为了方便使用和管理，我们可以对axios进行封装，使其更符合我们的项目需求。

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

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // API请求的默认前缀
  timeout: 5000 // 请求超时时间
});

// request拦截器
service.interceptors.request.use(
  config => {
    // 可以在发送请求之前对请求进行一些处理，例如在请求头中加入token等
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// response拦截器
service.interceptors.response.use(
  response => {
    // 可以对响应数据进行一些处理，例如对接口返回的状态码进行统一处理
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

export default service;

这样我们就可以在项目中通过import导入这个封装好的axios，并使用它来发送http请求，例如：

import request from '@/utils/request'

request({
  url: '/user/login',
  method: 'post',
  data: {
    username: 'admin',
    password: '123456'
  }
}).then(res => {
  console.log(res)
}).catch(error => {
  console.log(error)
})

当然，这只是一个简单的示例，实际项目中可能需要对请求和响应进行更多的处理。