vue api封装

api封装

由于一个项目里api是很多的，随处都在调，如果按照之前的写法，在每个组件中去调api，一旦api有改动，遍地都要去改，所以api应该也要封装一下，将api的调用封装在函数中，将函数集中在一起便于管理。在src下面建一个api目录，用来放api，在api目录里建一个api.js，在其中封装各个api：

由于项目到这一步为止，只用到了一个后端的api，即login，所以此处api.js内容如下：

import service from '../utils/service'
 
export function login(data){
    return service({
        method:'post',
        url:'/login',
        data
    })
}

 抽出api.js后以后的后端api调用就用api.js中提供的函数，这里先改一下Login页面的api调用逻辑：

import {setToken} from '@/utils/setToken.js'
import {login} from '@/api/api.js'
methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          // this.service.post('/login',this.form)
          // .then(res=>{
          //   console.log(res.status)
          //   if(res.status===200){
          //     setToken('username',res.data.username)
          //     setToken('token',res.data.token)
          //     this.$router.push('/home')
          //   }
          // })
          login(this.form).then(res=>{
            console.log(res.status)
            if(res.status===200){
              setToken('username',res.data.username)
              setToken('token',res.data.token)
              this.$router.push('/home')
            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }