vue中axios的封装

安装
cnpm install axios -S

封装
一般的话我会在src目录中创建一个api文件夹，里面创建index.js和request.js两个文件，axios封装在request.js中，方法封装在index.js中

代码如下

//引入axios
import axios from 'axios'

// 判断当前的运行环境 process.env.NODE_ENV
// isDev 为真 开发环境 --- npm run serve
// isDev 为假 非开发环境（测试环境，生产环境）- npm run build
// const isDev = process.env.NODE_ENV === 'development'
const url = isDev ? 'http://xxxx.com' : 'http://xxxxx.com'

const request = axios.create({
  baseURL: url,
  timeout: 7000, // 超时设置
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 请求拦截器 - 所有的请求开始之前先到此处
request.interceptors.request.use((config) => {
  // 可以设置 加载的动画效果 的展示
  // console.log('正在加载....')
  // 在必要的路由设置一些额外的参数 ---- token信息携带放在此处
  // 鉴权 token添加
  // config.headers.Authorization = localStorage.getItem('token') || ''
  return config
}, (error) => {
  return Promise.reject(error)
})

// 响应拦截器 --- 所有请求的相应先到此处
request.interceptors.response.use((response) => {
  // 可以设置 加载的动画效果 的隐藏
  // console.log('加载完毕')
  
  // 数据过滤，根据后端标识字符来进行数据
  // if (response.data && response.data.err==0) {
  //   return response.data.data
  // } else if(response.data.err==2) {
  //   console.log(response.data.msg)
  // } else {
  //   console.log(response.data.msg)
  // }
    return config
}, (error) => {
  return Promise.reject(error)
})

export default request

之后在index.js中引入request.js封装一些请求数据方法就可以在其他页面调用后端数据了

index.js示例

import request from './request'

/**
 * 登录
 * @param {Object} params
 * 入参: username, password
 */
export function login (data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}