项目中对于axios的封装使用

Vue项目中axios的封装实践

最新推荐文章于 2025-07-28 17:16:53 发布

土家稀哥

最新推荐文章于 2025-07-28 17:16:53 发布

阅读量8.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue Vue全家桶文章标签： vue axios api

本文链接：https://blog.youkuaiyun.com/crazywoniu/article/details/79766766

本文介绍了在Vue项目中从安装axios到封装使用的全过程。首先，由于vue2推荐使用axios，作者展示了如何安装axios。接着，详细讲解了get和post请求的使用，特别是post请求中通过urlsearchparams传递参数给java开发的API的问题。然后，列举了axios的配置选项和响应数据格式。最后，展示了如何封装axios，并创建api.js文件，提供了简单的配置示例和使用方法。要正常使用封装后的axios，需在项目中安装axios和qs库。

在vue的项目中以前是使用vue-resource来请求数据，随着vue2的使用官方推荐使用axios，首先看看npm给出的axios定义以及兼容性：

在使用之前需要安装axios，在项目的根目录下打开命令窗口输入一下代码安装axios：

npm install axios

get方式使用：

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post方式使用：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post方式我在使用的过程中遇到了点小问题，就是后台一直拿不到我传递的数据，后来通过一下方法解决：

var params = new URLSearchParams();
    params.append('activityId', this.activityId);
    axios.post(this.HOST + '/enterReceivePage',params).then(res => {
        var obj = JSON.parse(res.data);
        this.hbinfo = obj.data;
    })

就是需要将传递的参数通过urlsearchparams传递后台才能接受，后台使用的是java开发的api。

配置的方式：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios({
  method:'get',
  url:'/user',
})
  .then(function(response) {

});

还有很多restful api常用的方式如下：

请求的配置选项如下：

{
  // 请求地址
  url: '/user',
 
  // 请求方法
  method: 'get', // default
 
  /

最低0.47元/天解锁文章

新学期VIP享超值加赠