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

目录
  • 一、 Axios 的封装
    • 安装 Axios
    • 引入
    • 接口管理
    • 统一暴露接口
    • 在组件中使用
  • 补充：封装get方法和post方法
  • 总结

一、 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的封装与接口管理的文章就介绍到这了,更多相关Vue Axios封装与接口内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue 2.0封装axios笔记

    详解Vue 2.0封装axios笔记

    前言 单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染.Ajax.websocket等),今天我们主要讲解Ajax部分. 最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios.superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐.已有的用户可以继续使用,但以后不再把

  • 关于Vue中axios的封装实例详解

    前言 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一个优秀的 HTTP 库,axios 打败了曾经由 Vue 官方团队维护的 vue-resource,获得了 Vue 作者尤小右的大力推荐,成为了 Vue 项目中 HTTP 库的最佳选择. 虽然,axios 是个优秀的 HTTP 库,但是,直接在项目中使用并不是那么方便,所以,我们需要对其进行一

  • vue中Axios的封装与API接口的管理详解

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

    如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.所以我们的尤大大也是果断放弃了对其官方库vue-reso

  • 详解Vue前端对axios的封装和使用

    Axios 是一个基于 promise 的 HTTP 库.将axios封装好后能更高效的开发并且方便维护,而且在以后的项目中也能直接套用,所以封装好是必要的.在参考了很多方法后,我拼凑出了一套我认为很实用的方法. 首先是http目录下的两个文件 helper.js 这个是功能性文件包括拼接url.过滤参数等,把方法集合到一个文件方便维护和修改. 读一遍知道他有什么功能就行了 const helper = { // 根据name获取地址栏的参数值 getQueryString (name) { l

  • vue 里面使用axios 和封装的示例代码

    vue官方推荐使用 axios发送请求 首先上需求 1.需要封装全局调用 2.返回一个promise对象 3.错误全局统一处理 4.除了登录界面token带入头部 5.登录时候把用户信息自动存到vuex里面 首先上封装代码 /** * User: sheyude * Date: 2017/8/23 0023 * Time: 下午 13:15 * */ import axios from 'axios'; // 导入配置文件 配置文件就导入的请求的前缀地址 import {defaults} fr

  • vue中axios的二次封装实例讲解

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '

  • Vue项目中如何使用Axios封装http请求详解

    前言 使用axios可以统一做请求响应拦截,例如请求响应时我们拦截响应信息,判断状态码,从而弹出报错信息.请求超时的时候断开请求,还可以很方便地使用then或者catch来处理请求. 下载源码 安装 npm install axios --save 建立http.js文件 在/src/utils/目录下建立一个htttp.js 1.首先导入axios和router. import axios from 'axios'; import router from '../router'; 2.接着设置

  • vue中axios封装使用的完整教程

    前言 如今,在项目中,普遍采用Axios库进行Http接口请求.它是基于promise的http库,可运行在浏览器端和node.js中.此外还有拦截请求和响应.转换JSON数据.客户端防御XSRF等优秀的特性. 考虑到各个项目实际使用时写法混乱,不统一.对Axios进行一下通用化的封装,目的是帮助简化代码和利于后期的更新维护,尽量通用化. 方法如下 1. vue安装axios npm install axios -S 或者 npm i axios -S 2. 在main.js进行全局引入 imp

  • 详解vue中axios请求的封装

    axios Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中, 也是vue官方推荐使用的http库:封装axios,一方面为了以后维护方便,另一方面也可以对请求进行自定义处理 安装 npm i axios 封装 我把axios请求封装在http.js中,重新把get请求,post请求封装了一次 首先,引入axios import axios from 'axios' 设置接口请求前缀 一般我们开发都会有开发.测试.生产环境,前缀需要加以区分,我们利用

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

    目录 一. Axios 的封装 安装 Axios 引入 接口管理 统一暴露接口 在组件中使用 补充:封装get方法和post方法 总结 一. Axios 的封装 在 Vue 项目中,和后台进行数据交互是频繁且不可或缺的,刚开始没进行 Axios 封装的时候,每次请求后台数据都是写的完整的路径,特别长,尤其是基准地址,每次都要复制一遍加在前面,冗余特别大.封装完 Axios 后,调用接口就简短多了,如果后期出现基准地址的改变,只需要在配置中更改一次即可. 安装 Axios npm install

  • vue中Axios的封装和API接口的管理示例详解

    vue中Axios的封装和API接口的管理示例详解

    目录 一.axios的封装 安装 引入 环境的切换 设置请求超时 post请求头的设置 请求拦截 响应的拦截 封装get方法和post方法 axios的封装基本就完成了,下面再简单说下api的统一管理. 2018.8.14更新 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js

  • Vue中axios的封装（报错、鉴权、跳转、拦截、提示）

    统一捕获接口报错 弹窗提示 报错重定向 基础鉴权 表单序列化 实现的功能 统一捕获接口报错 : 用的axios内置的拦截器 弹窗提示: 引入 Element UI 的 Message 组件 报错重定向: 路由钩子 基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子 表单序列化: 我这边直接用 qs (npm模块),你有时间也可以自己写 用法及封装 用法 // 服务层 , import默认会找该目录下index.js的文件,这个可能有小伙伴不知道 // 可以去了解npm的引入和es6引入

  • vue中axios的封装问题(简易版拦截,get,post)

    第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios'; axios.defaults.timeout = 5000; axios.defaults.baseURL =''; //http request 拦截器 axios.interceptors.request.use( config => { // const token = getCookie('名称')

  • VUE中的mapState和mapActions的使用详解

    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝... 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapActions主要是用于同步定义的方法,一般两者是结合使用,mapState同步项目中定义的全局的变量或者对象,mapActions是用于变量或者对象为空时,调用方法定义的全局方法获取. mapActions

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

随机推荐