Vue 中 Axios 的封装和接口管理

一、 Axios 的封装

在 Vue 项目中，和后台进行数据交互是频繁且不可或缺的，刚开始没进行 Axios 封装的时候，每次请求后台数据都是写的完整的路径，特别长，尤其是基准地址，每次都要复制一遍加在前面，冗余特别大。封装完 Axios 后，调用接口就简短多了，如果后期出现基准地址的改变，只需要在配置中更改一次即可。

安装 Axios

npm install axios

引入

我们先在 src 文件夹下创建一个 utils 文件，再在该文件夹下创一个 requery.js 文件

requery.js

import axios from axios
axios.defaults.baseURL = "http://...."  // 这里写接口基准地址
export default axios

接口管理

我们再在 src 文件夹下创建一个 api 文件，里面存放接口

我们把一个模块相关的接口封装在一个 .js 文件中，例如我现在创建一个信息管理模块的接口管理文件，取名为 messageManege.js

① 首先要在该文件中引入我们的 requery.js 文件

import request from @/utils/requery

② 封装方法为 post 的接口

//获取所有验收数据
export const getAllCheck = () => request({
    method:post,
    url:"manager/selectAllCheckInfo"
})

③ 封装方法为 get 的接口

//获取所有延期数据
export const getAllDelay = () => request({
    url:"manager/selectAllPostponeInfo"
})

④ 封装参数要拼接在链接后面的接口

//验收状态处理
export const CheckHandle = (x1,x2) => {
    return request({
        method: post,
        url:`manager/check?status=${x1}&&id=${x2}`
    })
}

⑤ 封装请求头为 "Content-Type": "application/json" 的接口

export const UpdateStage = data => {
    return request({
        method: post,
        url: stage/update,
        headers: {
            "Content-Type": "application/json",
        },
        data: data
    })
}

注意这里要传入的 data 要转换成 json 格式

统一暴露接口

在 src/api 的下面新建 index.js 文件用来统一暴露所有接口

import {
    getAllCheck,CheckHandle,getAllDelay,UpdateStage
} from ./messageManage

export const getAllCheckAPI = getAllCheck

export const CheckHandleAPI = CheckHandle

export const getAllDelayAPI = getAllDelay

export const UpdateStageAPI = UpdateStage

在组件中使用

① mounted() 中使用

async mounted() {
    const res = await getAllCheckAPI();
    console.log(res.data)   // 打印返回的数据
  },

② 在普通方法中的使用

async StartProcess(s, i) {
      // 调用后端接口
      return CheckHandleAPI(s, i).then((res) => {
        if (res.status == 200) {
          this.$message.success("状态修改成功!");
        } else {
          this.$message.error("状态修改失败!");
        }
      });
},

这样 axios 的封装和使用就完成啦~