axios调接口

在一个index中设置

import axios from "axios"
// 储存自己的baseURL
const baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.defaults.baseURL = baseURL

//通过axios请求拦截器添加token，保证拥有获取数据的权限
// 左侧接口数据需要拦截
axios.interceptors.request.use(config =>{
  // console.log(config)
  config.headers.Authorization = window.localStorage.getItem('mytoken')
  return config   //最后必须return
})


// 不管是post还是get都可以这样写
// 登录验证
// params对象
export const checkUser = params => {
  return axios.post('login', params).then(res => res.data)
}
// 获取左侧菜单列表
export const MenuList = params => {
  return axios.get('menus', params).then(res => res.data)
}
// 这个是带参数的接口
export  const  queryInfo={query:'', pagenum:1, pagesize:2}
export const userList = params =>{
  // 定义参数,写在一个对象里面
  // 用params来接收参数
  return axios.get('users',{params:queryInfo}).then(res =>res.data)
}

获取的时候
1.引用
在需要的.vue页面

 import {checkUser} from "../api/index.js"

2.调用

 checkUser(formName).then(res=>{
   if(res.meta.status===200){
        // 把token存进去localStorage
      localStorage.setItem('mytoken',res.data.token);   //存进去的步骤就是这样写的
       this.$router.push({path:'/home'})
// 使用vuex共享用户名
      this.$store.commit('setUsername',res.data.username)
   }else{
     this.$message({
      type:"error",
      message:"用户名或密码错误"
   })
}
})

另外一种方法
在main.js配置

import axios from "axios"
// 储存自己的baseURL
const baseURL = 'https://www.liulongbin.top:8888/api/private/v1/'
axios.defaults.baseURL = baseURL
Vue.prototype.$http = axios

获取接口

 this.$http.put(`users/${userChangeDate.id}/state/${userChangeDate.mg_state}`).then(res=>{
          console.log(res.data)
          if(res.data.meta.status!==200){
            return this.$message.error("状态改变失败")
          }
          this.$message.success("状态改变成功")
        })

简化params操作有两种，一种是上面的，一种是下面的

  async userList(){
              // 这是另外一个传值的方法
        // 简化pramas对象，使用async await
        const {data:res} = await this.$http.get('users',{params:this.queryInfo})  //将data重命名为res
          if(res.meta.status!==200) return this.$message.error("获取数据失败")
        // 获取用户列表
          this.userlist=res.data.users
        // 获取页码条数
          this.total=res.data.total
 }