【vue】axios 封装接口

更新时间：2021-12-27

使用 axios 封装请求

方法一：

// 封装接口

import request from '@/utils/request.js'
export function list(name, limit, page) {
  return axios({
    url: `/api/members/list?name=${name}&limit=${limit}&page=${page}`,
    method: "get"
  });
}
export function listById(params) {
  return axios({
    url: `/api/members/listById`,
    method: "get",
    params
  });
}
export function add(data) {
  return axios({
    url: "/api/members/add",
    method: "post",
    data
  });
}
export function upt(data) {
  return axios({
    url: "/api/members/upt",
    method: "put",
    data
  });
}
export function del(id) {
  return axios({
    url: `/api/members/del?id=${id}`,
    method: "delete"
  });
}

// 使用接口

async getList(name = "") {
     const { data } = await list(name, this.limit, this.page);
     console.log( data )
   }
async getListById(query) {
  const { data } = await listById(query);
  console.log(data)
}

方法二：

// 封装接口

import request from '@/utils/request.js'
const login = (param) => {
	 const res = await request.post('/api/v2/system/login', param)
	 return new Promise((resolve, reject) => {
	   if (res.data.errCode === 200) {
	     resolve(res)
	   } else {
	     reject(res)
	   }
	 })
}
export default login

// 使用接口

async handleLogin () {
  try {
    await this.$refs.form.validate()
    const { data } = await login({
      userID: this.form.userID,
      password: md5(this.form.password)
    })
	console.log( data )
  } catch (error) {
    console.log( error )
  }
}