vue项目实践-添加axios封装api请求

安装 axios

npm install axios --save

创建实例 (utils/fetch.js)

axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-urlencoded 通过设置 transformRequest 属性 data => qs.stringify(data) 可以正常表单形式提交

import axios from 'axios'

const instance = axios.create({
  baseURL: 'apiBaseUrl', // api的base_url
  timeout: 10000 // 请求超时时间
  // transformRequest: data => qs.stringify(data) //
})
// request拦截器
instance.interceptors.request.use(
  e => {
    e.params = e.params || {}
    e.headers = e.headers || {}
    //set 默认值
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// respone拦截器
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (response.status === 200) {
      return resp
    }
    return resp
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default instance

将 api 请求封装到 api 文件夹下

在 api 文件中新建接口模块并使用 axios 实例(utils/fetch.js) src/api/api_test.js

import request from '@/utils/fetch'

export function test(data) {
  return request({
    url: '/test',
    method: 'post',
    data: data
  })
}

使用的时候,可通过引入 api/模块.js 调用方法,也可以通过安装插件的形式将 api 接口扩展到 vue 实例中,使其可以更方便的在项目中使用

以 test 模块为例创建一个$api 扩展

src/api/index.js

import * as api_test from './test'

const apiObj = {
  api_test
}

const install = function(Vue) {
  if (install.installed) return
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiObj
      }
    }
  })
}
export default {
  install
}

在 main.js 安装 $api 扩展:

import api from './api'
Vue.use(api)

在项目中调用:this.$api.api_test.test().then(resp=>{...}).catch(()=>{...})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏流柯技术学院

VMware安装CentOS时,无法以图形界面安装解决办法

3542
来自专栏liulun

【JAVA WEB教程】jsp环境搭建+部署网站(eclipse+tomcat)【详细+图文】

下载tomcat7.X ? 下载地址为:http://tomcat.apache.org/download-70.cgi 下载完成之后就开始安装 ? Next ...

6098
来自专栏黑泽君的专栏

linux系统下Vi编辑器或者Vim编辑器设置显示行号、自动缩进、调整tab键宽度的技巧?

工作中嫌vim 中一个tab键的宽度太大,linux系统默认,没改之前是一个tab键宽度是8个字符,想改成4个字符,

2622
来自专栏游戏杂谈

设置Flex中Tree组件默认选中一项

项目中需要用到tree这个组件,但我在做产品的过程中想让程序默认选中tree组件中的某一节点。之前用到的flex的sdk是3.4版本,在使用selectIte...

955
来自专栏电光石火

IDEA 配置 Vue 支持

1.打开IntellIJ IDEA的Plugins窗口,在查询框输入vue。 ? 2.点击右边的安装按钮。 ? 3.配置支持.vue后缀文件 ...

6243
来自专栏java达人

$(window).load()与$(document).ready()的区别

1.执行时间不同:从字面的意思上理解,$(document).ready()就是文档准备好了。也就是浏览器已经解析完整个html文档,dom树已经建立起来了,...

18610
来自专栏lgp20151222

js页面刷新跳转的几种方式及区别

2241
来自专栏全栈之路

win7 java环境变量配置

选择电脑界面上的 计算机(或者我的电脑电脑图标),按下鼠标右键,出现菜单,看到有’属性’这一项,点击确定

3773
来自专栏weixuqin 的专栏

Django 项目重命名

  在日常学习工作过程中,我们难免需要复用以前的项目,这里讲下复用 Django 项目并重命名的过程。

1281
来自专栏程序员的知识天地

如何用 Python 爬取需要登录的网站?

最近我必须执行一项从一个需要登录的网站上爬取一些网页的操作。它没有我想象中那么简单,因此我决定为它写一个辅助教程。

1522

扫码关注云+社区