axios的一封装和二次封装

在做axios请求的时候还是有一个后端服务器地址比较好，这是自己搞的一个简易的后端，小白一枚，不要喷我哦

指令是：

全局指令：
npm install express-generator -g
局部指令：
express --view=ejs server

var express = require('express');
var router = express.Router();

const cors = require("cors");
router.use(cors()); //使用cors中间件

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

router.get('/getList', function(req, res, next) {
  res.json({
    status:200,
    data:[
      {name:'张三',sex:'男',age:18},
      {name:'李四',sex:'男',age:28},
      {name:'张飞燕',sex:'女',age:20},
    ]
  });
});


module.exports = router;

一次封装

一次封装就是简单的将基本的baseURl放在一个文件里面，用的时候直接调用就可以了。

// src/util/index
import axios from "axios";

/**
 * 注意点：  axios.create() 是创建一个新的axios实例   
 * 每个都可以配置不同的基地址服务器   
 * 解决了请求2个及更多的服务器的情况
*/
export const request = axios.create({
    baseURL : 'http://127.0.0.1:3000'
})

export const login = axios.create({
    baseURL:'http://127.0.0.1:3000'
})

再home组件中使用

<template>
  <div>
    <button @click="getData()">点击获取数据</button>
    <ul v-for="(item,index) in list" :key="index">
        <li>姓名:{{item.name}}</li>
        <li>性别:{{item.sex}}</li>
        <li>年龄:{{item.age}}</li>
    </ul>
  </div>
</template>

<script>
import {request} from '../util/index'
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
       async getData(){
           const res = await request.get(/getList)
           this.list = res.data.data
        }
    }
}
</script>

<style>
    ul li {
        list-style: none;
        margin-left: 50px;
    }
    ul {
        display: flex;
    }
</style>

二次封装

二次封装就是再一次封装的基础上将后面获取不同数据时，将后端提供的不同的url也封装起来，俗称api接口管理文档

在src/api/login

import { login } from "@/util";
export const loginUser = () =>{
    return login({
        url:'/getList'
    })
}

首先要引入已经封装好的baseURL,然后再返回一个请求路径给它

最后献上使用,只是在一的基础上做了略微的改变

<template>
  <div>
    <button @click="getData()">点击获取数据</button>
    <ul v-for="(item,index) in list" :key="index">
        <li>姓名:{{item.name}}</li>
        <li>性别:{{item.sex}}</li>
        <li>年龄:{{item.age}}</li>
    </ul>
  </div>
</template>

<script>
import {loginUser} from '../api/login'
export default {
    data(){
        return {
            list:[]
        }
    },
    methods:{
       async getData(){
           const res = await loginUser()
           this.list = res.data.data
        }
    }
}
</script>

<style>
    ul li {
        list-style: none;
        margin-left: 50px;
    }
    ul {
        display: flex;
    }
</style>

 最后附上效果图