axios拦截器与api方法封装与使用

axios拦截器封装与createAPI方法封装

拦截器封装在项目中起到的作用是将在发送请求时对于一些设置进行封装重用，对于请求到的信息进行拦截验证操作。
先是安装axios模块npm i axios --save-dev
目录结构如下：

我们将其写入src/utils/request.js文件中。
代码如下

import axios from "axios"
import store from "@/store"
import {Message,MessageBox,Notification} from "element-ui"
// axios.defaults.headers['Content-Type']="application/json;charset=utf-8"

//创建axios实例
let service=axios.create({
  url:'http://服务器地址',
  baseURL:"http://服务器地址",
  withCredentials:true,
  timeout:10000,
  headers:{
    'Content-Type':'application/x-www.form-urlencoded;application/json;charset=utf-8'
  }
})

//请求拦截器
service.interceptors.request.use(
  config=>{
    let token=store.state.token
    if(token){
      config.headers.authorization='Bearer'+token
    }
    return config
  },
  err=>{
    console.log(err)
    Promise.reject(err)
  }
)
//相应拦截器
service.interceptors.response.use(
  res=>{
    let code=res.data.code
    let msg=res.data.msg
    console.log(res)
    if(code==600){
      MessageBox.confirm('登录状态过期','系统提示',{
        confirmButtonText:"重新登录",
        cancelButtonText:"退出"
      }).then(()=>{
        store.dispatch('LogOut').then(()=>{
          location.reload()
        })
      })
    }else if(code===500 && msg==="校验失败"){
      return res.data
    }else if(code!==200){
      Notification.error({
        title:res.data.msg
      })
      return Promise.reject('error')
    }else{
      return res.data
    }
  },
  err=>{
    console.error('error:'+err)
    Message({
      message:err.res.data.msg,
      type:"error",
      duration:5*1000
    })
    return Promise.reject(err)
  }
)

export default service

//createAPI是封装发送axios请求的方法
export const createAPI=(url,method,data,params)=>{
	let config={}
	if(method==='get'){
		config.params=data
	}else{
		config.data=data
		config.params=params
	}
	return service({
    url,
    method,
    ...config
	})
}

export const createFormAPI=(url,method,data)=>{
	let config={}
	config.data=data
	config.headers={
		'Cache-Control':'no-cache',
		'Content-Type':'application/x-www-form-urlencoded'
	}
  config.responseType="json"
  
	return service({
    url,
    method,
    ...config
	})
}

API方法及使用

为符合项目的模块化开发，将API整体分模块存放在统一的api文件夹中(src/api)。响应上面创建的createAPI方法，这里使用其创建API实例：

//引入的是上文抛出的service方法如下
import request from "@/utils/request"
export function login(json){
  return request({
    url:"/user/login",
    method:'post',
    data:json
  })
}
export function getUser(json){
  return request({
    url:"/user/info",
    method:"get",
    data:json
  })
}

也可以使用createAPI来创建：

import {createAPI} from "@/utils/request"
export const login=data=>{createAPI('/user/login',"post",data)}
export const getUser=data=>{createAPI('/user/info','get',data)}

因为创建api的方式比较固定，当然是代码越少越好！

组件中使用api

<template>
	<div>
	<el-button @click="getInfo">获取数据el-button>
	div>
template>
<script>
import {
      getUser} from "@/utils/api/user.js"
 export default{
      
  data(){
      
   return{
      
    name:"tom"
   }
  },
  methods:{
      
   getInfo(){
      
    let json={
      uname:this.name}
    getUser(json).then(res=>{
      
      //获取到数据进行操作
    }).catch(err=>{
      
      console.log(err)
	})
   }
  }
 }
script>

也可以使用es7的aync来执行操作：

methods:{
 async getInfo(){
   let {data}=await getUser({uname:this.name})
   //data就是获取到的数据
 }
}