Vue封装axios

引言：整理项目中有意思的东西

完成文件：request.js、api.js

文件作用：request.js集中配置axios；api.js集中管理后端接口地址

目的：分离后端接口地址和axios参数配置，并集中管理。

一、配置request.js模块

新建一个js文件，例如request.js

导入依赖项：

import axios from 'axios'
import qs from 'qs'
import Globe_VM from '../main'    //这里指向页面的Vue实例

配置axios参数，判断生产、测试环境和开发环境配置基础url：

/*判断生产环境和开发环境*/
if (process.env.NODE_ENV === 'production') {
  /*根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
  if (process.env.VUE_APP_FLAG === 'prod') {
    //production 生产环境
    axios.defaults.baseURL = 'http://xxx.xxx.xxx.xx';
    window.sockterUrl = 'ws://http://xxx.xxx.xxx.xx/websocket'
  } else {
    //dev 测试环境
    axios.defaults.baseURL = 'http://xxx.xxx.xxx.xx';
    window.sockterUrl = 'ws://http://xxx.xxx.xxx.xxx/websocket'
  }
} else {
  //本地开发环境
  axios.defaults.baseURL = '/';
}
axios.defaults.timeout = 10000;            //超时时间
axios.defaults.responseType = 'json'    //响应内容的类型

配置请求拦截器：

axios.interceptors.request.use(
  config => {
    //在这里判断token的有效性、强制跳转登录页等
    resolve(config)
  },
  error => {
    return Promise.reject(error)
  }
)

配置响应拦截器：

axios.interceptors.response.use(
  res => {
    //当响应状态码为401时，强制跳转登录页，清除本地token
    if (res.data && Number(res.data.code) === 401) {
      //按照自己的需求配置清除token
      removeToken()，
      //通过更改路由地址实现跳转登录页
      Globe_VM.$router.push({
        path: '/login'
      })
    }
    if (res.data) {
      return Promise.resolve(res.data)
    }
    return res
  },
  error => {
    return error
  }
)

向外提供请求的接口：

export function requestAxios(url, data, method, headers) {
  return new Promise((resolve, reject) => {
    let config = {
      url: url,
      method: method
    }
    if (getToken()) {
      date.headers = {
        token: getToken()
      }
    }
    if (data !== '' && method === 'get') {
      config.url += '?' + qs.stringify(data)
    } else {
      config.data = data
    }
    axios(config).then(res => {
      resolve(res.data)
    }).catch(error => {
      reject(error)
    })
  })
}

二、配置api.js接口集

// 导入request.js模块
import {
  requestAxios
} from './requery'

//配置对外接口
export function getXXXList(data) {
  return commonsAjax(`/api/v1/xxx/list`, data, 'get')
}

三、在vue页面中使用

...script
//导入api.js中的对外接口
import getXXXList from '../api/api'

export default {
  ...
  methods: {
    created() {
      //调用api.js中的对外接口
      getXXXList().then(res => {
        ...
      }).catch(error => {
        ...
      })
    }
  }
  ...
}

• 分类： Vue 前端开发
• 标签： 无标签