vue项目中axios的二次封装

为什么要封装axios

1. 一般的项目是有三个url地址的 一个生产环境用的 一个测试环境用的 一个正式环境用的 如果不封装axios 切换环境就全部替换url不现实
2. 可以做请求和响应的处理

src目录下新建utlis文件夹新建request.js文件

代码

import axios from 'axios'
    // switch (process.env.NODE_ENV) {
    //     // 生产
    //     case "production":
    //         axios.defaults.baseURL = ''
    //         break;
    //         // 测试
    //     case 'tset':
    //         axios.defaults.baseURL = ''
    //         break;
    //         //
    //     default:
    //         axios.defaults.baseURL = ''
    //         break;

// }
// 这里的swith 对应package.json中的 scripts里面  为了方便我直接新建axios对象

一般新建脚手架是没有serve:test与serve:production选项 需要我们自配 :后面的值自己设置
比如这里的serve:test 启动命令npm run serve:test 启动测试环境
下面是生产环境的axios封装

import axios from 'axios'
//创建一个axios对象  
const instance = axios.create({
        baseURL: 'http://192.168.0.18:10001/', //baseURL会在发起请求的时候自动拼接在url前面
        timeout: 5000
    })
    //请求拦截
instance.interceptors.request.use(
        config => {
            //携带上token
            // let url = config.url
            // if (url !== 'login') {
            //     if (url.headers.Authorization = sessionStorage.getItem('token')) {
            //         console.log('token验证成功')
            //     } else {
            //         // 跳转登录页
            //     }
            // }
            return config
        },

        err => {
            return Promise.reject(err)
        }
    )
    // 响应拦截
    //根据服务器状态码做响应处理
instance.interceptors.response.use(
    function(res) {
        return res.data
    },

    function(err) {
        let { response } = err
        if (response) {
            // 服务器返回结果
            switch (response.status) {
                case 401: //需要验证用户(一般是未登录)
                    // 跳转登录页
                    break;
                case 403: //服务器理解请求单拒绝(token过期)
                    break;
                case 404: //
                    break;
            }
        } else {
            // 服务器崩溃或者断网
            if (!window.navigator.onLine) {
                // 断网处理  可以跳转到断网页面
                return
            }
        }
        return Promise.reject(err)
    }
)

export function get(url, params) {
    return instance.get(url, {
        params
    })
}
export function post(url, data) {
    return instance.post(url, data)
}
export function put(url, data) {
    return instance.put(url, data)
}
export function del(url, data) {
    return instance.del(url, data)
}

使用的时候

//按需引入 
import { post } from '../../utils/request'
methods:{
login(){
      post('/login',{'参数'})
      .then(res=>{
        console.log(res.data)
      })
      .catch(err=>{

      })
    }
}