1. module.exports = {
  2. dev: {
  3. // Paths
  4. assetsSubDirectory: '/',
  5. assetsPublicPath: '/',
  6. proxyTable: {
  7. /open':{
  8. target:"https://www.sojson.com/", // 目标
  9. changeOrigin: true, //是否跨域
  10. pathRewrite: {
  11. '^/open': '/open'
  12. }
  13. }
  14. }
  15. }
  1. this.$ajax({
  2. method: "post",
  3. url: '/open/api/weather/json.shtml'
  4. params: {
  5. city: '北京'
  6. }
  7. })then(({data}) => {
  8. if (data.message === "success") {
  9. console.log(data.data)
  10. }
  11. });

https://www.jianshu.com/p/495535eb063e vue项目使用webpack-dev-server调用第三方接口跨域配置

接口请求封装:http.js

  1. import axios from 'axios'
  2.  
  3. const TIME_OUT_MS = * // 默认请求超时时间
  4.  
  5. /*
  6. * @param response 返回数据列表
  7. */
  8. function handleResults (response) {
  9. let remoteResponse = response.data
  10. var result = {
  11. success: false,
  12. message: '',
  13. status: [],
  14. errorCode: '',
  15. data: {
  16. total: ,
  17. results: []
  18. }
  19. }
  20. if (remoteResponse.success) {
  21. result.data.results = remoteResponse.data
  22. result.data.total = remoteResponse.total
  23. result.success = true
  24. }
  25. if (!remoteResponse.success) {
  26. let code = remoteResponse.errorCode
  27. if (code === ) {
  28. console.log('传参错误')
  29. }
  30. result.errorCode = remoteResponse.errorCode
  31. result.message = remoteResponse.message
  32. }
  33. return result
  34. }
  35.  
  36. function handleUrl (url) {
  37. url = BASE_URL + url
  38. // BASE_URL是接口的ip前缀,比如http:10.100.1.1:8989/
  39. return url
  40. }
  41.  
  42. /*
  43. * @param data 参数列表
  44. * @return
  45. */
  46. function handleParams (data) {
  47. return data
  48. }
  49.  
  50. export default {
  51. /*
  52. * @param url
  53. * @param data
  54. * @param response 请求成功时的回调函数
  55. * @param exception 异常的回调函数
  56. */
  57. post (url, data, response, exception) {
  58. axios({
  59. method: 'post',
  60. url: handleUrl(url),
  61. data: handleParams(data),
  62. timeout: TIME_OUT_MS,
  63. headers: {
  64. 'Content-Type': 'application/json; charset=UTF-8'
  65. }
  66. }).then(
  67. (result) => {
  68. response(handleResults(result))
  69. }
  70. ).catch(
  71. (error) => {
  72. if (exception) {
  73. exception(error)
  74. } else {
  75. console.log(error)
  76. }
  77. }
  78. )
  79. },
  80. /*
  81. * get 请求
  82. * @param url
  83. * @param response 请求成功时的回调函数
  84. * @param exception 异常的回调函数
  85. */
  86. get (url, response, exception) {
  87. axios({
  88. method: 'get',
  89. url: handleUrl(url),
  90. timeout: TIME_OUT_MS,
  91. headers: {
  92. 'Content-Type': 'application/json; charset=UTF-8'
  93. }
  94. }).then(
  95. (result) => {
  96. response(handleResults(result))
  97. }
  98. ).catch(
  99. (error) => {
  100. if (exception) {
  101. exception(error)
  102. } else {
  103. console.log(error)
  104. }
  105. }
  106. )
  107. },
  108. /*
  109. * 导入文件
  110. * @param url
  111. * @param data
  112. * @param response 请求成功时的回调函数
  113. * @param exception 异常的回调函数
  114. */
  115. uploadFile (url, data, response, exception) {
  116. axios({
  117. method: 'post',
  118. url: handleUrl(url),
  119. data: handleParams(data),
  120. dataType: 'json',
  121. processData: false,
  122. contentType: false
  123. }).then(
  124. (result) => {
  125. response(handleResults(result, data))
  126. }
  127. ).catch(
  128. (error) => {
  129. if (exception) {
  130. exception(error)
  131. } else {
  132. console.log(error)
  133. }
  134. }
  135. )
  136. },
  137. /*
  138. * 下载文件用,导出 Excel 表格可以用这个方法
  139. * @param url
  140. * @param param
  141. * @param fileName 如果是导出 Excel 表格文件名后缀最好用.xls 而不是.xlsx,否则文件可能会因为格式错误导致无法打开
  142. * @param exception 异常的回调函数
  143. */
  144. downloadFile (url, data, fileName, exception) {
  145. axios({
  146. method: 'post',
  147. url: handleUrl(url),
  148. data: handleParams(data),
  149. responseType: 'blob'
  150. }).then(
  151. (result) => {
  152. const excelBlob = result.data
  153. if ('msSaveOrOpenBlob' in navigator) {
  154. // Microsoft Edge and Microsoft Internet Explorer 10-11
  155. window.navigator.msSaveOrOpenBlob(excelBlob, fileName)
  156. } else {
  157. const elink = document.createElement('a')
  158. elink.download = fileName
  159. elink.style.display = 'none'
  160. const blob = new Blob([excelBlob])
  161. elink.href = URL.createObjectURL(blob)
  162. document.body.appendChild(elink)
  163. elink.click()
  164. document.body.removeChild(elink)
  165. }
  166. }
  167. ).catch(
  168. (error) => {
  169. if (exception) {
  170. exception(error)
  171. } else {
  172. console.log(error)
  173. }
  174. }
  175. )
  176. },
  177. uploadFileFormData (url, data, response, exception) {
  178. axios({
  179. method: 'post',
  180. url: handleUrl(url),
  181. data: data,
  182. timeout: TIME_OUT_MS,
  183. headers: {
  184. 'Content-Type': 'multipart/form-data'
  185. }
  186. }).then(
  187. (result) => {
  188. response(handleResults(result))
  189. }
  190. ).catch(
  191. (error) => {
  192. if (exception) {
  193. exception(error)
  194. } else {
  195. console.log(error)
  196. }
  197. }
  198. )
  199. }
  200. }

接口api统一封装: ports.js

  1. export default {
  2. manage: {
  3. register: '/manage/company/register', // 注册接口
  4. login: '/manage/company/login', // 登录
  5. logout: '/manage/company/loginOut' // // 退出
  6. },
  7. pwd: {
  8. sendEmail: '/manage/user/sendEmail',
  9. resetPwd: '/manage/user/passwordReset'
  10. }
  11. }

引入和定义方式:main.js中

  1. import http from 'http.js'
  2. import ports from 'ports'
  3. Vue.prototype.http = http
  4. Vue.prototype.ports = ports

使用 方式:组件内

  1. this.http.post(this.ports.manage.login, {
  2. userAccount: 'test',
  3. userPassword: '',
  4. cert: ''
  5. }, res => {
  6. if (res.success) {
  7. // 返回正确的处理
  8. } else {
  9. // 返回错误的处理
  10. }
  11. })

https://www.jianshu.com/p/72d911b6d61d vue-cli项目中axios接口封装以及api的统一管理

Vue项目中的http请求统一管理的更多相关文章

  1. 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...

  2. 介绍vue项目中的axios请求(get和post)

    一.先安装axios依赖,还有qs依赖 npm install axios --save npm install qs --save qs依赖包用post请求需要用到的 插入一个知识点: npm in ...

  3. Vue + webpack 项目配置化、接口请求统一管理

    准备工作 需求由来: 当项目越来越大的时候提高项目运行编译速度.压缩代码体积.项目维护.bug修复......等等成为不得不考虑而且不得不做的问题.  又或者后面其他同事接手你的模块,或者改你的bug ...

  4. vue项目中Webpack-dev-server的proxy用法

    问题:在VUE项目中,需要请求后台接口获取数据,这时往往会出现跨域问题 解决方法:在vue.config.js中devServer配置proxy 常用的场景 1. 请求/api/XXX现在都会代理到请 ...

  5. <转载> VUE项目中CSS管理

    vue的scoped 在vue项目中,当 .vue文件中 <style> 标签有 *scoped 属性时,它的 CSS 只作用于当前组件中的元素,很好的实现了样式私有化的目的. 使用sco ...

  6. Vue项目中使用Vuex + axios发送请求

    本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...

  7. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  8. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

  9. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

随机推荐

  1. CentOS7安装CDH 第十三章:CDH资源池配置

    相关文章链接 CentOS7安装CDH 第一章:CentOS7系统安装 CentOS7安装CDH 第二章:CentOS7各个软件安装和启动 CentOS7安装CDH 第三章:CDH中的问题和解决方法 ...

  2. Linux命令——set 和 unset

    参考:Linux set and unset http://www.runoob.com/linux/linux-comm-set.html https://blog.csdn.net/u010003 ...

  3. Django modle基础样版

    定义一个基类模版, from django.db import models class ModelBase(models.Model): """ "" ...

  4. 9.1: 请每个小组在 cnblogs.com 上面创建团队博客,第一个博客把小组成员都介绍一下 #团队博客作业1------------------答题者:徐潇瑞

    大家好,我们这个团队的名字叫14组之家,之所以这么叫,因为我们是在章亦葵老师的现代软件工程课上成立为14组,而且我们每个组员在这个小家庭中都感受到温暖,我们互相协作,互相配合,来完成我们的任务. 首先 ...

  5. linux网络编程之socket编程(七)

    今天继续学习socket编程,北京在持续几天的雾霾天之后久违的太阳终于出来了,心情也特别特别的好,于是乎,在这美好的夜晚,该干点啥事吧,那当然就是继续坚持我的程序学习喽,闲话不多说,进入正题: 通过这 ...

  6. GET和POST的区别【转载】

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...

  7. 26 组件中style标签lang属性和scoped属性的介绍

    普通的style标签只支持普通的样式,如果想要启用scss或less,需要为style元素,设置lang属性 只要 咱们的style标签,是在 .vue 组件中定义的,那么,推荐都为style开启sc ...

  8. Vue.js最佳实践(五招助你成为vuejs大师)

    转自https://www.jb51.net/article/139448.htm 本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给 ...

  9. Java Part 001( 03_01_数据类型和运算符 )

    注释 Java语言的注释一共有三种类型,分别是单行注释.多行注释和文档注释. 1. 单行注释 单行注释就是在程序中注释一行代码,在Java语言中,使用双斜线“//”进行单行注释. 2. 多行注释 多行 ...

  10. /etc/sysconfig/network-scripts/ifcfg-ensxx

    TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static # 获取ip的方式,static表示静态设置的ip,还有dhcp,系统 ...