vue2中通过封装axios方法请求后台接口

最新推荐文章于 2025-03-24 09:21:51 发布

欲行昭昭天命

最新推荐文章于 2025-03-24 09:21:51 发布

阅读量1.1k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/lalunr/article/details/126807934

版权

本文介绍了在Vue2项目中如何封装axios以请求后台接口。内容包括安装axios和qs库，设置拦截器，定义get、post、put、delete等基本API方法，并在组件中使用这些方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在vue2中通过封装axios方法请求后台接口？

废话不多说直接进入正题

axios官网： axios中文文档|axios中文网 | axios (axios-js.com)

通过npm install axios安装axios

以及npm install qs 安装qs

配置拦截器

部分接口的数据会需要进行qs转换

    if(config.data&&!(config.data instanceof FormData)){
         config.data=qs.stringify(config.data)
    }

定义方法

常用的方法有四个

get获取数据

export function get(url, data) {
  return new Promise((rel, rej) => {
    instance
      .get(url, { params: data })
      .then((res) => rel(res))
      .catch((error) => rej(error));
  });
}

post提交数据(一般用来做表单提交)

export function post(url, data) {
  return new Promise((rel, rej) => {
    instance
      .post(url, data)
      .then((res) => rel(res))
      .catch((error) => rej(error));
  });
}

put修改数据

export function put(url, data) {
  return new Promise((rel, rej) => {
    instance
      .put(url, data)
      .then((res) => rel(res))
      .catch((error) => rej(error));
  });
}

delete删除数据

export function deleter(url, data) {
  return new Promise((rel, rej) => {
    instance
      .delete(url, { params: data })
      .then((res) => rel(res))
      .catch((error) => rej(error));
  });
}

上述操作完毕后在需要用到的地方引用即可

import {get,post,put,deleter} from '@/utils/request.js'