vue Axios封装请求

  • 一、先安装axios依赖
  • 二、在main.js入口引用
  • 三、定义全局变量复用域名地址
  • 四、错误信息弹窗定义
  • 五、API定义
  • 六、接口定义
  • 七、导入配置
  • 八、main文件引入
  • 九、使用


一、先安装axios依赖

npm install axios --save

npm install X --save 会把依赖包安装在生产环境中，并且把依赖包名称添加到 package.json 文件 dependencies。
而如果npm install X --save-dev则会把依赖包安装在开发环境中，并且添加到 package.json 文件 devDependencies
如果vue项目要部署上线，为防止依赖包失效，一般采用–save

二、在main.js入口引用

import axios from 'axios';
Vue.prototype.$axios = axios;

三、定义全局变量复用域名地址

开发中的url一般是由协议+域名+端口+接口路由+参数组成
一般 协议+域名 这两个部分是在axios是需要一直被复用的，所以可以设置一个专业的全局变量模块脚本文件，在模块里直接定义初始值，用export default 暴露出去，再入口文件main.js里面引入这个文件地址，并且使用Vue.prototype挂载到vue实例上面

首先在static文件下面的config文件里面新建一个 config.js文件（命名随意）
在config.js文件下定义全局变量，这个项目我是定义服务器地址。

config.js

export default {
  method: 'post',
  baseURL: 'http://127.0.0.1:8080/xxxxxxxx/',
  // 请求头信息s
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 参数
  data: {
    tokenId: '',
    id: ''
  },
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: false,
  // 返回数据类型
  responseType: 'json'
}

四、错误信息弹窗定义

统一错误信息弹窗
errorr.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export const ErrorHandling = val=>{

  ElementUI.Notification.error({
    title: '错误',
    message: val.msg,
    duration:3000
  });

}
// 默认全部导出
export default {
  ErrorHandling
}

五、API定义

api.js

import axios from 'axios'
import config from './config'
import error from './error'
import router from '../router'
import store from '../util/storage'

export default function $axios(options) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: config.baseURL,
      headers: config.headers,
      transformResponse: [function (data) {
      }]
    })

    // request 拦截器
    instance.interceptors.request.use(
      config => {
        config.headers['Accept-Language'] = store.get('langs')
        config.data.tokenId = store.get('tokenId')
        config.data.id = store.get('id')
        return config
      },
      error => {
        // 请求错误时
        // 1. 判断请求超时
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
          return 'timeout请求超时'
        }
        // 2. 需要重定向到错误页面
        const errorInfo = error.response
        if (errorInfo) {
          const errorStatus = errorInfo.status // 404 403 500 ...
          router.push({
            path: `@/components/error/${errorStatus}`
          })
        }
        return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
      })

    // response 拦截器
    instance.interceptors.response.use(
      response => {
        let data
        // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
        if (response.data === undefined) {
          data = JSON.parse(response.request.responseText)
        }  else {
          data = response.data
        }
        let value=JSON.parse(response.request.response)
           if (!value.success){
           if(value.code=="40004"){
             router.push({path: '/'})
           }else if (value.code=="40001"){
             router.push({path: '/'})
             error.ErrorHandling(value);
           }
           }
        return data
      },
      err => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
              err.message = '请求错误'
              break

            case 401:
              err.message = '未授权，请登录'
              break

            case 403:
              err.message = '拒绝访问'
              break

            case 404:
              err.message = `请求地址出错: ${err.response.config.url}`
              break

            case 408:
              err.message = '请求超时'
              break

            case 500:
              err.message = '服务器内部错误'
              break

            case 501:
              err.message = '服务未实现'
              break

            case 502:
              err.message = '网关错误'
              break

            case 503:
              err.message = '服务不可用'
              break

            case 504:
              err.message = '网关超时'
              break

            case 505:
              err.message = 'HTTP版本不受支持'
              break

            default:
          }
        }
        return Promise.reject(err) // 返回接口返回的错误信息
      })
    instance(options).then(res => {
      resolve(res)
      return false
    }).catch(error => {
      reject(error)
    })
  })
}

六、接口定义

interface.js 统一配置接口链接

import axios from './api'
import config from './config'
/* 将所有接口统一起来便于维护
 * 如果项目很大可以将 url 独立成文件，接口分成不同的模块
 */
export const login = data => {
  return axios({
    url: 'login',
    method: 'post',
    data: data
  })
}
// 注册
export const register = data => {
  return axios({
    url: 'register',
    method: 'post',
    data: data
  })
}

// 默认全部导出
export default {
  login,
  register
}

七、导入配置

// 导入所有接口
import apiList from './interface'
import errorList from './error'
import configList from './config'
const install = Vue => {
  if (install.installed) {
    return
  }
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    '$api': {
      get () {
        return apiList
      }},
    '$error': {
      get () {
        return errorList
      }},
    '$config': {
      get () {
        return configList
      }}
  })
}

export default install

八、main文件引入

import api from './xxxx/index'
Vue.use(api)

九、使用

this.$api.getConsumptionList({"key":value}).then((val) => {
                    if(val.isOk){
                     
                    }
                }