Vue项目集成Axios支持Restful调用

2020-05-28 本文已影响0人 Gary的个人空间

Vue项目集成Axios支持Restful调用

Axios是前端Http请求工具，集成ajax请求，提供Promise API，方便请求处理，并可以很好的定制拦截器等统一处理请求和响应。

GitHub地址：

安装Axios

使用npm安装axios即可

npm install axios --save

使用Axios

在.env文件中配置一个baseURL地址，方便所有的请求都基于此地址。

VUE_APP_BASE_URL=http://localhost:9086/mock

引入即可

import axios from 'axios'

export const $http = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10
})

可以把$http配置给Vue原型

Vue.prototype.$http = $http

简单使用：

this.$http.get('/04b77df3cb464c23a5b5f7717e307654/roles').then(response => {
    console.debug(response.data)
})

集成通用Restful调用

注意：下面的请求必须是安装Restful标准定义URL，比如删除是HTTP的DELETE，否则没有意义

这里需要使用一个模拟服务，可以用mockjs等实现，但是mockjs其实是并不发送实际的请求，因此这里选择自己实现的基于Spring Boot开发的模拟服务，以Mock Server方式启动的。

GitHub地址：https://github.com/fugary/simple-boot-mock-server

需要安装JDK8以上，下载release版本之后，使用/bin/start.bat启动即可，监听：http://localhost:9086

启动后添加一个角色服务：

image

根据Restful规范，一般是针对不同的HttpMethod提供不同的服务，因此按照Restful标准定义好请求URL之后，就可以设计开发一个通用的调用。

封装通用Restful调用到文件RequestModelApi.js，简单增删改等操作就不需要再重复定义了：

import axios from 'axios'
export const $http = axios.create({
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 10000
})
export default function (url, methods = {}) {
  function search (params, config) {
    return $http(Object.assign({
      url,
      method: 'get',
      params
    }, config))
  }
  function getById (id, config) {
    return $http(Object.assign({
      url: `${url}/${id}`,
      method: 'get'
    }, config))
  }
  function deleteById (id, config) {
    return $http(Object.assign({
      url: `${url}/${id}`,
      method: 'delete'
    }, config))
  }
  function saveOrUpdate (data, config) {
    return $http(Object.assign({
      url,
      method: 'post',
      data
    }, config))
  }
  return {
    search,
    getById,
    deleteById,
    saveOrUpdate,
    ...methods
  }
}

使用RequestModelApi.js，比如这里的RoleModelApi.js：

import RequestModelApi from './RequestModelApi'
// 指定roles的url
const RoleModelApi = new RequestModelApi('/04b77df3cb464c23a5b5f7717e307654/roles')
// 更多方法定义（不在增删改范围外的请求）：
// RoleModelApi.xxxxMethod = function(){}

export default RoleModelApi

页面上使用：

import RoleModelApi from '../../utils/RoleModelApi'
RoleModelApi.search().then(response => {
    console.debug(response.data)
})
RoleModelApi.getById(1).then(response => {
    console.debug(response.data)
})

GitHub地址：https://github.com/fugary/simple-element-ui-template

Vue项目集成Axios支持Restful调用