Axios配置(vue)

基于Axios 的封装

配置Axios

在项目目录下的untils（工具文件夹）新建Request.js,这里主要存放 axios 的配置及拦截器，最后导出一个axios对象
在此之前我们需要提前将一些工具安装好，下面我使用了axios lodash

  // 安装依赖
  npm install axios lodash --save

配置axios

  import axios from 'axios' // 引入axios
  import _ from 'lodash'  // 我们需要lodash中的一些方法对axios传入的参数进行一些处理  文档：https://www.lodashjs.com/
  import { Message } from 'element-ui' // 这里我使用了element-ui 中的message组件进行提示

  // api接口的运行环境切换  （开发环境和生产环境的切换）
  axios.defaults.baseURL = process.env.NODE_ENV === "development" ? "http://www.development.com":"http://www.production.com" 

  // 设置axios请求超时时间
  axios.defaults.timeOut = 5000

  // 对axios 的请求参数进行设置
  axios.interceptors.request.use(
    config => {
      // 将axios 的请求参数中的null值和undefined值清除，并且转换成json格式的字符串
      config.data = JSON.stringify(_.isObject(config.data) ? _.omitBy(_.omitBy(config.date,_.isNull),_.isUndefined): config.data
      // 如果没有tokens存储 就重新登录
      if(!Storage.get('tokens')){
        window.location.href = '/login'
      } else{
        // 如果有tokens存储
        // 这里需要你根据你的项目处理你的具体的业务逻辑
        axios.defaults.authorization = Storage.get('tokens').tokens.access_token
      }
      // 给每次的http请求的header都加上token,这样后台就可以根据你的token判断你的登录情况
      config.headers= {
        'Content-Type': 'application/json;charset=UTF-8',
        Authorization: axios.defaults.authorization
      }
      return config
    },
    error =>{
      return Promise.reject(error)
    }
  )
  
  // 响应拦截器
  axios.interceptors.response.use(
    response => {
      // 根据具体的项目具体分析
      // 如果返回的状态码为200 则证明接口请求成功，可以正常拿到数据
      // 否则的话抛出异常
      if(response.status === 200){
        return Promise.resolve(response)
      }else{
        return Promise.reject(response)
      }
    },
    err =>{
      // 在这里我们可以对异常的状态进行统一的处理
       if (err && err.response) {
        const errMes = err.response.data.desc;
        switch (err.response.status) {
          case 400:
            Message.error(errMes || '错误请求');
            break;
          case 401:
            Message.error(errMes || '用户未登录');
            break;
          case 403:
            Message.error(errMes || '拒绝访问');
            break;
          case 404:
            Message.error(errMes || '请求错误,未找到该资源');
            break;
          case 405:
            Message.error(errMes || '请求方法未允许');
            break;
          case 406:
            Message.error(errMes || '请求方法不被接受');
            break;
          case 408:
            Message.error(errMes || '请求超时');
            break;
          case 500:
            Message.error(errMes || '服务器端出错');
            break;
          case 501:
            Message.error(errMes || '网络未实现');
            break;
          case 502:
            Message.error(errMes || '网络错误');
            break;
          case 503:
            Message.error(errMes || '服务不可用');
            break;
          case 504:
            Message.error(errMes || '网络超时');
            break;
          case 505:
            Message.error(errMes || 'http版本不支持该请求');
            break;
          default:
            Message.error(errMes || `连接错误${err.response.status}`);
            break;
        }
        return Promise.reject(err)
      }
      return Promise.reject(err)
    }
  )

封装方法

get、post、delete、put、patch请求的封装

/**
 * 封装get方法
 * @param {string} url - 接口地址
 * @param {object} params = {} - 接口参数
 * @returns {*} Promise
 */
export function get(url,params = {}){
  return new Promise((resolve,reject)=>{
    axios.get(url,{
      params:params
    }).then(res=>{
      resolve(res.data)
    }).catch(err=>{
      reject(err)
    })
  })
}

/**
 * 封装delete方法
 * @param {string} url - 接口地址
 * @param {object} params = {} - 接口参数
 * @returns {*} Promise
 */

export function del (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.delete(url, {
      params: params
    })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * 封装post方法
 * @param {string} url -接口地址
 * @param {object} data = {}  - 接口参数
 * @returns {*} Promise
 */

export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装patch请求
 * @param {string} url - 接口地址
 * @param {object} data = {} - 接口参数
 * @returns {*} Promise
 */

export function patch (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err)
      })
  })
}

/**
 * 封装put请求
 * @param {string} url - 接口地址
 * @param {object} data = {} - 接口参数
 * @returns {*} Promise
 */

export function put (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(res => {
        resolve(res.data)
      }, err => {
        reject(err)
      })
  })
}

使用

1. main.js中引入文件

  import * as Request from './untils/Request.js'
  Vue.prototype.$http = Request

2. 在组件中使用

  this.$http.post(url,data).then(res=>{
    console.log(res.data)
  })
1. main.js中引入文件
```javascript
  import * as Request from './untils/Request.js'
  Vue.prototype.$http = Request

2. 在组件中使用

  this.$http.post(url,data).then(res=>{
    console.log(res.data)
  })