vue axios 的简单封装

安装axios

npm install axios;   // 安装axios

封装axios

在src文件夹中创建axios文件夹，再在axios文件夹中创建indx.js文件

项目目录

在index.js文件中封装

import axios from 'axios'
// 请求超时时间
axios.defaults.timeout = 30000000
axios.defaults.baseURL = process.env.NODE_ENV
axios.defaults.headers.post['Content-Type'] = 'application/json';

// axios 请求拦截器
axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.error(error);
  }
);


//ajax返回请求拦截 拦截
axios.interceptors.response.use(
  response=> {
    // ajax 返回状态
    const res = response.data

    // 状态不为200的时候
    if (!res.features && res.code !== 200 ) {
      return res
    } else {
      if (data.status) {
        return res
      } else {
        if (!res.data) return 'null'
        return res.data
      }
    }
  },

  error => {
    const errMsg = error.toString()
    const code = errMsg.substr(errMsg.indexOf('code') + 5)

    if (parseInt(code) === 401) {
      consloe.log(error)
    }
    return Promise.reject(error)
  }
)

export default axios

在.env.development.js和 .env.production文件内配置后台接口的地址(区分生成环境和开发环境)

  // 项目的服务后台接口的地址
 module.exports = {
  NODE_ENV = 'development'
  VUE_APP_BASE_API = 'https://tmall-api.com/api'
}

在api文件夹下创建index.js文件

在index.js文件下输入请求方式

import request from './axios'

// 引入后台接口集合

export function getData(data) {
  return request({
    url: '/接口地址',
    method: 'get',
    params: data
  })
}

最后在组件中引入就可以使用

import { getData } from '@/api/index'

getPageData() {
  getData({
    id: this.id,
    keyword: this.keyword
  }).then((res) => {
    if(res.code == 200){
      ...
    }else {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    }
  })
}

自己开发中的小心得，希望对大家有帮助