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

巴特西

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

安装 axios

创建实例 (utils/fetch.js)

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

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

最新文章

热门文章