Axios的基本使用及axios二次封装

一,下载

1.npm

npm i axios

2.yarn 

yarn add axios

 二，基本写法

1.第一种 

  //发起一个get请求
this.$axios.get("https://www.liulongbin.top:8888/api/private/v1/menus")
.then(({ data }) => {
  //成功的回调
       console.log(data);
    })
.catch((error)=>{
  //error失败的回调
   })

2.第二种

  this.$axios({
       //请求方式
       method:'post',
      //url地址
      url: "https://www.liulongbin.top:8888/api/private/v1/menus",
      //参数
      data:{},
      params:{},
      //请求头
      headers: {
        Authorization: token,
      },
    }).then(({ data }) => {
     //成功的回调
       console.log(data);
    }).then((error) => {
     //失败的回调
       console.log(error);
    });;

三，axios二次封装

 1.在项目根目录下创建http文件夹

 2.server文件中配置请求拦截和响应拦截

import axios from 'axios'
import { Message } from 'element-ui'
//在创建的axios对象中配置基地址，请求过期时间
const server = axios.create({
  baseURL: 'https://www.liulongbin.top:8888/api/private/v1',
  timeout: 5000
})
// 请求拦截
// interceptors axios的拦截器对象
server.interceptors.request.use(config => {
  // config 请求的所有相关信息
  config.headers.Authorization = localStorage.getItem('token') || ''
  return config
}, err => {
  Promise.reject(err)
})

// 响应拦截
server.interceptors.response.use(res => {
  const { data, meta } = res.data
  //判断后端返回请求状态
  if(meta.status === 200) {
       //信息提示
    Message({
      type: 'success',
      message: meta.msg
    })
  } else {
      //信息提示
    Message({
      type: 'error',
      message: meta.msg
    })
  }
  return data
}, err => {
  throw new Error(err)
})
//导出server
export default server

 2.request文件对请求进行函数封装

//引入
import server from "./server"
//不传默认为get请求
function request({method='get', url, data, params}) {
  return server({
    method: method,
    url: url,
    data: data,
    params: params
  })
}
//导出request函数
export default request

 3.api文件封装业务接口

import request from "./request"
// 用户登录的接口
export const login = (data) => request({method: 'post', url: '/login', data: data})