关于vue中 Axios的使用心得

一直想整理一份关于 Axios的文章，今天闲来无事就做一下吧。

首先在这里给大家放一下Axios的中文说明 ：https://www.kancloud.cn/yunye/axios/234845

npm下载方式

//这里推荐还没有使用cnpm的小伙伴使用一下cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
//下载axios包
cnpm install axios

cdn的使用方式

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

关于axios的使用说明大家可以看上面的网站的中文说明，本文主要对axios开发过程中在vue项目中的配置的总结

1：在main.js中全局配置axios，把axios挂载到vue的原型上，这样我们就可以在vue创建的对象中直接只用this.axios 使用axios
import axios from 'axios'
Vue.prototype.axios = axios

2：在main.js同级创建setAxios.js文件，在这个文件里配置axios，以及项目的接口，并导出（推荐这样使用）我在这里放一下我的配置

import store from './store'
import router from './router'
import axios from 'axios'
// http 全局拦截
// token放在我们请求的header上面打回去给后端
//这里是配置baseURL
axios.defaults.baseURL = "http://192.168.1.228:2125";
// axios.defaults.baseURL = "http://192.168.1.239:2125";
//这里是全局拦截 这里把localstorage里面的token值放在header中带回去，这样就不用每一次都传token值，会自动帮我们传
axios.interceptors.request.use(
    config => {
        if (localStorage.getItem('token')) {
            config.headers.token = localStorage.getItem('token')
        }
        return config
    }
)

//这里是对res的返回做全局判断
axios.interceptors.response.use(
    res => {
        // if (res.status == 200) {
            const data = res.data
            if (data.code == -1) {
                // 登陆过期，请从新登录
                alert('登陆过期')
                localStorage.removeItem('token')
                localStorage.setItem('isLogin',false)
                // 跳转到login页面
                router.replace({ path: '/login' })
            }else if(data.state == -1){
                alert('该用户已被禁用！')
                localStorage.removeItem('token')
                localStorage.removeItem('userName')
                localStorage.setItem('isLogin',false)
                router.replace({ path: '/login' })
            }
            return data
        }
    // }
)
// 登录
//这里是 写接口的地方
export const login = params => {
    return axios.post('/api/login', params);
}

需要掉用接口的时候只需在需要的文件里面

import { login } from "@/setAxios.js";

发请求实例

login(this.loginForm).then(res => {
        if (res.state == 1) {
          localStorage.setItem('token',res.token)
          localStorage.setItem('userName',res.Name)
          localStorage.setItem('isLogin',true)
          this.$message({
            showClose: true,
            message: "恭喜你，登录成功",
            duration: 1000,
            type: "success",
            onClose: function() {
              _this.$router.replace({
                path: "/index"
              });
            }
          });
        }else if(res.state == 0){
          this.$message.error('用户名或者密码错误');
          this.loading = false
        }
      })

到此我对axios的相关使用就示范完了，希望对大家有所帮助，也同时希望大家能给我提出更多好的修改