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

Posted 2020-12-26 易墨

安装 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(()=>{...})