Axios入门及请求拦截配置

Axios

• 安装

npm install axios

• 引入main,js

import axios from 'axios'

• 挂载main.js

Vue.prototype.$http = axios

解释：$http自定义名，可随意命名，如$axios, 注意后面页面要与命名一致

• 调用get请求

 this.$http.get('/api/test',{params:{...}})
  .then(res=>{...})
  .catch(err=>{...})

解释：params是传参对象，可以直接写{...}，例：

  this.$http.get('/api/test',{
    id:0
  })
  .then(res=>{...}) // 返回结果
  .catch(err=>{...})

• 调用post请求

 this.$http.post('/api/test',{params:{...}})
  .then(res=>{...})
  .catch(err=>{...})

拦截请求

• setaxios.js

import axios from "axios"
import store from "./store/index"
import router from "./router/index"

// http拦截,token放header给后端
export default function setAxios(){
    // 请求拦截
    axios.interceptors.request.use(config=>{
        if(store.state.token){
            config.headers.token=store.state.token
        }
        return config
    })

    // 请求返回拦截器
    axios.interceptors.response.use(response=>{
        if(response.status==200){
            const data=response.data
            if(data.code==-1){
                // 登录过期,重登,清空token
                store.commit("setToken","")
                localStorage.removeItem("token")
                router.replace({path:"/login"})
            }
            return data
        }
        return response
    })
}

• main.js

import axios from 'axios'
import setAxios from './setaxios'

setAxios()

• vue文件调用axios(演示登陆函数,并用async加await)

async submitHandler(e) {
  e.preventDefault();
  let result=await this.$http.get('/api/login',{params:this.model});
  if(result.code==0){
    this.$store.commit("setToken",result.token)
    localStorage.setItem("token",result.token)
    alert(result.msg)
  }else{
    alert(result.msg)
  }
}