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 的封装和使用就完成啦~

补充：封装get方法和post方法

我们常用的ajax请求方法有get、post、put等方法，相信小伙伴都不会陌生。axios对应的也有很多类似的方法，不清楚的可以看下文档。但是为了简化我们的代码，我们还是要对其进行一个简单的封装。下面我们主要封装两个方法：get和post。

get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。

/**
* get方法，对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
export function get(url, params){    
  return new Promise((resolve, reject) =>{        
      axios.get(url, {            
          params: params        
      }).then(res => {
          resolve(res.data);
      }).catch(err =>{
          reject(err.data)        
  })    
});}

post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/** 
* post方法，对应post请求 
* @param {String} url [请求的url地址] 
* @param {Object} params [请求时携带的参数] 
*/
export function post(url, params) {
  return new Promise((resolve, reject) => {
       axios.post(url, QS.stringify(params))
      .then(res => {
          resolve(res.data);
      })
      .catch(err =>{
          reject(err.data)
      })
  });
}

这里有个小细节说下，axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！

总结

关于Vue中Axios的封装与接口管理的文章就介绍至此，更多相关VueAxios封装与接口内容请搜索编程宝库以前的文章，希望以后支持编程宝库！

摘要：通常来说，string表示原生类型，而String表示对象。 背景与JavaScript语言不同的是，TypeScript使用的是静态类型，比如说它指定了变量可以保存的 ...