Vue中Axios的封装与接口管理详解

npm install axios

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

import request from '@/utils/requery'

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

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

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

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

import {
    getAllCheck,CheckHandle,getAllDelay,UpdateStage
} from './messageManage'
 
export const getAllCheckAPI = getAllCheck
 
export const CheckHandleAPI = CheckHandle
 
export const getAllDelayAPI = getAllDelay
 
export const UpdateStageAPI = UpdateStage

  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("状态修改失败!");
        }
      });
},

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)        
    })    
});}

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)
        })
    });
}