axios简单封装

server.js

// 简单封装 Axios 练习
import axios from 'axios'

// 创建一个实例、默认url、超时
const instance = axios.create({
    baseURL: 'http://47.104.64.44:8889/api/private/v1/',
    timeout: 4000
})

// 拦截器 --请求拦截
instance.interceptors.request.use(config => {
    //请求成功、部分接口需要拿到token
    let token = sessionStorage.getItem('token')
    if (token) { config.headers.Authorization = token }
    return config
}, err => {
    //失败
    return Promise.reject(err)
})

// 拦截器 -- 响应拦截
instance.interceptors.response.use(res => {
    return res
}, err => {
    return Promise.reject(err)
})

//导出
export default instance 

api.js

// 将封装的 axios请求导入
import server from './server'

// 按需到出每个请求

//请求首页数据
export const loginPost = (data) => server.post('login', data)
export const getUsers = (params) => server.get('users', params)

app.vue

<template>
  <div>
    <button @click="loginclick">登入post请求</button>
    <button @click="getUser">get请求</button>
  </div>
</template>
 
<script>
import { loginPost, getUsers } from "@/api/api";
export default {
  data() {
    return {};
  },
  methods: {
    //登入post请求
    async loginclick() {
      const { data: res } = await loginPost({
        username: "admin",
        password: "123456",
      });
      window.sessionStorage.setItem("token", res.data.token);
    },
    //获取用户数据get请求(根据vue电商管理api来写的封装测试)
    async getUser() {
      const { data: res } = await getUsers({
        params: {
          query: '',
          pagenum: 1,
          pagesize: 5,
        }
      });
      console.log(res.data.users);
    },
  },
};
</script>
 
<style scoped >
</style>