前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目实践-添加axios封装api请求

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

作者头像
易墨
发布2018-09-14 16:00:52
2.3K0
发布2018-09-14 16:00:52
举报
文章被收录于专栏:一个爱瞎折腾的程序猿

安装 axios

npm install axios --save

创建实例 (utils/fetch.js)

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

代码语言:javascript
复制
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

代码语言:javascript
复制
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

代码语言:javascript
复制
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 扩展:

代码语言:javascript
复制
import api from './api'
Vue.use(api)

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-07-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装 axios
    • 创建实例 (utils/fetch.js)
      • 将 api 请求封装到 api 文件夹下
        • 以 test 模块为例创建一个$api 扩展
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档