博主信息
Rind
博文
1
粉丝
0
评论
0
访问量
76
积分:0
P豆:2
最新更新
Vue axios封装2021-04-25
博文分类
热门文章
Vue axios封装76

Vue axios封装

2021年04月25日 09:08:38阅读数:76博客 / Rind

根目录打开src目录创建request文件夹

创建两个文件http.js、api.js

http.js

  1. import axios from 'axios'
  2. // 环境的切换
  3. if (process.env.NODE_ENV === 'development') {
  4. axios.defaults.baseURL = 'http://192.168.3.5:8084/'
  5. } else if (process.env.NODE_ENV === 'debug') {
  6. axios.defaults.baseURL = 'http://192.168.3.5:8084/'
  7. } else if (process.env.NODE_ENV === 'production') {
  8. axios.defaults.baseURL = 'http://192.168.3.5:8084/'
  9. }
  10. axios.defaults.timeout = 10000
  11. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8;multipart/form-data'
  12. /**
  13. * get方法,对应get请求
  14. * @param {String} url [请求的url地址]
  15. * @param {Object} params [请求时携带的参数]
  16. */
  17. export function get (url, params) {
  18. return new Promise((resolve, reject) => {
  19. axios.get(url, {
  20. params: params
  21. }).then(res => {
  22. resolve(res.data)
  23. }).catch(err => {
  24. reject(err.data)
  25. })
  26. })
  27. }
  28. /**
  29. * post方法,对应post请求
  30. * @param {String} url [请求的url地址]
  31. * @param {Object} params [请求时携带的参数]
  32. */
  33. export function post (url, params) {
  34. return new Promise((resolve, reject) => {
  35. axios.post(url, params)
  36. .then(res => {
  37. resolve(res.data)
  38. })
  39. .catch(err => {
  40. reject(err.data)
  41. })
  42. })
  43. }

api.js

  1. //引入http.js
  2. import { get, post } from './http'
  3. //请求地址http://192.168.3.5:8084/exam/question
  4. //http://192.168.3.5:8084/在http.js已定义
  5. //在api.js只需要接口就行了
  6. export const api = p1 => get('exam/question', p1)

在需要使用的页面引入import {api} from ‘@/request/api’;

{内可以多个}

  1. api({
  2. //参数
  3. }).then(res => {
  4. //成功返回
  5. })

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 下面Vue.js教程栏目带大家了解一下vueaxios。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    本篇文章给大家详细介绍一下Vue一个TodoList的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    我们在做表单提交的时候,往往会碰到一些表单提交的需求,那vueaxios与上传文件碰撞后不会出现什么不一样的火花吗?
    vue不使用ajax用axios的原因是axios是Promise的实现版本,符合最新的ES规范。
    是指一种将抽象性函式接口的实现细节部分包、隐藏起来的方法。的主要功能在于我们能修改自己的实现代码,而不用修改那些调用我们代码的程序片段。
    实现uniapp公用方法:首先创建uni-app,并新建页面文件;然后新建文件,并定义方法;接着页面调用方法;最后保存编译预览即可。

    2020-09-19

    643

    ajax栏目为大家介绍认识Ajax的,避免代码冗余就可以借助函数的思想,将ajax操作的代码到一个函数中,不同的请求函数传递的参数所有不同。
    实现的方法:1、通过private私有化变量,限制对类属性的方法;2、通过set和get方法设置对每个属性对外访问接口,外部需要通过公共的方法来改变类的属性;3、创建类的实例。

    2020-11-12

    518

    vue-cli安的方法:首先安node环境,并安vue-cli】脚手架,代码为【npm install -g vue-cli】;然后安项目依赖,代码为【npm install】。
    uniapprequest请求的方法:首先项目下新建common文件夹,再创建【request.js】文件;然后打开【request.js】文件,开始写的代码;最后通过promise异步请求,最后导出方法
    uniapp函数的方法:1、获取当前时间,代码为【hour = date.getHours() < 10 ?
    用npm安vue的方法:首先下载node.js;然后通过命令安淘宝镜像npm;接着通过命令“npm install -g @vue/cli”安Vue;最后创建vue项目即可。
    javascript对象的方法:1、使用常规,代码为【function Person (name,age,sex)】;2、常见的方法,代码为【constructor : Person,_init

    2020-12-17

    683

    方法:1、安最新版本的node和npm;2、安cnpm;3、在目标文件夹下打开终端;4、使用“cnpm install vue-cli -g”命令全局安vue-cli即可。
    uni-app栏目今天为大家介绍基于InnerAudioContext一个基本的音频组件,有效解决小程序官方不维护audio组件的问题。
    Promise实践 实现微信小程序接口
    atom安vue插件的步骤:1、打开atom软件,依次点击菜单的“File-Settings-Install”;2、在搜索框中vue,点击“搜索”按钮,会出来一堆插件,选择需要的vue插件,点击“install
    ​本篇文章给大家介绍rabbitmq常见功能(php版本),有一定的参考价值,需要的朋友可以参考一下,希望对大家有所帮助。
    本篇文章给大家介绍一下angular8http服务的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    JavaScript栏目介绍一些常见的方法,有需要的朋友可以看看,有问题或者意见,欢迎评论区留言,一起讨论学习进步。