Vue中Axios的封装

http.js

参考https://www.cnblogs.com/chaoyuehedy/p/9931146.html

一、环境的切换

if (process.env.NODE_ENV === 'development') {            //开发环境
    axios.defaults.baseURL = 'https://www.baidu.com'
  } else if (process.env.NODE_ENV === 'debug') {         //测试环境
    axios.defaults.baseURL = 'https://www.ceshi.com'
  } else if (process.env.NODE_ENV === 'production') {    //生产环境
     axios.defaults.baseURL = 'https://www.production.com'
  }

二、设置请求超时

axios.defaults.timeout = 5000

三、post请求头设置

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

四、响应的拦截

axios.interceptors.response.use(
    response => {
      if (response.status === 200) {
    
        return Promise.resolve(response)
      } else {
        return Promise.reject(response)
      }
    },
    // 服务状态码不是200的情况
    error => {  
      if (error.response.status) {
        switch (error.response.status) {
          // 401 未登录
          case 404:
            router.push('/notfounted')
            break
          default: Notification.error({
            title: '错误',
            message: '服务器错误，或网络错误',
            offset: 100,
              duration:1500
            });
        }
        return Promise.reject(error.response)
      }
    }
  )

五、封装get方法

 /**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function get(url,params){
    return new Promise((resolve, reject) =>{
        axios.get(url,params)
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

六、post封装方法

/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url,params)
        .then(res => {
            resolve(res.data);
        })
        .catch(err => {
            reject(err.data)
        })
    });
}

也可以参考：https://zhanghao-web.github.io/2019/03/29/Vue/vue%E4%B8%ADaxios%E8%AF%B7%E6%B1%82%E7%9A%84%E5%B0%81%E8%A3%85/

api.js

import axios from 'axios'
import {get,post} from './http'    //引入封装的get，post方法  http.js
axios.prototype.get=get  
axios.prototype.post=post
export default{
  getserver(data) {
        return axios.post("user/insertUser", data)
    }
}

apiserver

//将API注册到Vue的原型中
import Vue from 'vue'
import API from './api'    //引入api.js
Vue.prototype.axios = API     //api挂载到vue的原型上