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

vue項目實踐-添加axios封裝api請求