封装axios,自定义header,请求拦截器

封装axios,自定义header,请求拦截器

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

点击这里前往axios官网，了解安装详情
1、封装axiso
新建js文件并将一下文件复制。

import axios from 'axios'
import Vue from 'vue'

import url from '@/assets/js/url' //你的url文件
import qs from 'qs'//格式化字符串工具

axios.interceptors.request.use( // 正文开始
  (config) => {
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
    }
    return config
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 区分生产模式和开发模式
function setHost() {
  return 'http://' + ''
}
let location = process.env.VUE_APP_LOACTION || setHost()
// axios默认配置
axios.defaults.timeout = 10000 // 超时时间
axios.defaults.baseURL = location // 默认地址
axios.defaults.headers['Content-Type'] =
'application/x-www-form-urlencoded;charset=UTF-8'
let v = new Vue()
/**
 *
 * 接收一个对象
 *  method 请求类型
 *  url 请求链接
 *  data 请求数据
 *  then 回调方法
 */
let axiosHttp = (obj) => {
  let loading = v.$loading({
    lock: true,
    text: 'Loading',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0)',
  })
  let oData = obj.method == 'GET' ? obj.data : {}
  let params = obj.params || oData
  axios({
    method: obj.method || 'POST',
    url: obj.url || '',
    data: obj.data || '',
    params,
  })
    .then(function(res) {
      loading.close()
      let data = res.data
      if (data.code != 0) {
        v.$message({
          type: 'error',
          message: data.message,
        })
        return
      } else if (data.code == 1) {
        v.$alert(data.message, '系统提示')
        obj.catch && typeof obj.catch == 'function' && obj.catch(res)
      } else if (data.code == 999) {
        // 999重新登陆
        process.env.NODE_ENV == 'production' &&
          v.$alert(data.message, '系统提示', {
            callback: () => (window.location.href = '/adminLogin'),
          })
      } else if (data.code == 444) {
        // 444是404页面
        // v.$router.push({name:'error'});
      } else {
        obj.then && typeof obj.then == 'function' && obj.then(res)
      }
    })
    .catch(function(error) {
      loading.close()
      console.log(error.response)
      if (error.response) {
        console.log(error.response.status)
        if (error.response.status != 200) {
          v.$message({
            type: 'error',
            message: error.response.statusText,
          })
        }
      }
    })
} //正文结束
export { axiosHttp}

2、完成步骤一后
你可以按照一下发起一个ajax请求：

     index(self, name) {
    let config = {
      category_name: self[name].category_name,
      sort: self[name].sort,
      icon: self['url'],
      describe: self[name].describe,
    }
    console.log(config)
    axiosHttp({
      url: url.insertCategory,
      data: config,
      then(res) {
        console.log(res.data.data)
        if (res.data.code == 0) {
          self.$message({
            type: 'success',
            message: res.data.message,
          })
          self.dialogVisible = false
          self.$api.getCategoryList(self, 'schoolData')
        }
      },
    })
  },