VUE项目中Axios的封装使用

介绍

axios是VUE.js 2提供给用户异步获取调用接口的组件库，封装axios的好处是有利于减少代码的冗余，看起来清晰，明了。

项目安装依赖

在项目控制台运行
npm install axios -S

封装

直接上代码

import axios from 'axios'
import { getToken } from './auth'

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // api的base_url
  timeout: 5000, // 请求超时时间
  headers: { 'Content-Type': 'application/json;charset=UTF-8' }
})
//  表示跨域请求时是否需要使用凭证
service.defaults.withCredentials = true
service.defaults.crossDomain = true
export function commonRequestUtil(param) {
  return {
    header: {
      version: '1.0',
      token: getToken()
    },
    body: param
  }
}

export function commonPost(url, params = {}) {
  return service({
    url: url,
    method: 'post',
    data: commonRequestUtil(params)
  })
}

export function commonPut(url, params = {}) {
  return service({
    url: url,
    method: 'put',
    data: commonRequestUtil(params)
  })
}

export function commonDelete(url, params = {}) {
  return service({
    url: url,
    method: 'delete',
    data: commonRequestUtil(params)
  })
}

export function get(url) {
  return service({ url: url, method: 'get' })
}

export default function post(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, commonRequestUtil(params)
      , { headers: { 'Content-Type': 'application/json;charset=UTF-8' }})
      .then(response => {
        resolve(response.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

*这样就完成了axios的封装

使用例子

import {commonDelete, commonPost , commonPut} from '../utils/commonRequestUtil'

const examRequest = {
  /**
   * 考试人员密码登录
   */
  reqPasswordLogin(data = {}){
    return commonPost('/auth/mobile/pwd-login',data)
  },
 }

这样在组件中就可以引入examRequest.js进行使用了，不过需要配置跨域
如何配置跨域请访问: link.

Ending