在做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>

最后附上效果图

axios的一封装和二次封装相关推荐

《C#零基础入门之百识百例》（五十二）封装介绍 -- 二维多项式求值
C#零基础入门面向对象 -- 封装介绍 -- 二维多项式求值前言一,封装概念二,封装属性三,实例练习 -- 二维多项式求值 3.1 题目描述 3.2 问题分析 3.3 参考代码前言本文属 ...
java哪些注解可以二次封装点光源_什么是二次封装点光源
原标题:什么是二次封装点光源二次封装点光源,是将经过第一次封装的LED芯片与其它驱动或控制电路在完成电子电路焊接后,密封在聚合物封装体内,以达到防水.防尘及保护作用:它的防护等级最高可达IP68,可 ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...
axios的二次封装与async,await的配合使用?
前言:前些日子读文章,说是vue3.0会在明年下半年正式推出,改动的地方好像也不少,比如说vue3.x的代码库将会用typescript编写,并提供改进的 TypeScript 支持.变化还是很快的, ...
面试官：为啥要axios 的二次封装呢及其使用是干啥的
一.为什么要进行封装通常我们的项目会越做越大,页面也会越来越多,随之而来的是接口数量的增加.api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护. 举个例子,当axios发生问题存在重 ...
axios如何二次封装
axios二次封装的五种方法为什么要封装 axios 的 API 很友好,你完全可以很轻松地在项目中直接使用. 不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间.设置请求 ...
axios进行二次封装
Web开发中,我们最常用的HTTP库就是Axios了,它的底层基于Ajax进行封装,在浏览器端和服务端都可以使用.如果大家对一些API不是很熟悉可以参考官方地址,或者中文社区. 为什么要对ax ...

axios的一封装和二次封装

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

一次封装

二次封装

最后附上效果图

axios的一封装和二次封装相关推荐

最新文章

热门文章