1.增加新知识

假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动

所以封装一下axios,每个组件都通过一个媒介去请求数据,假如axios要改动,只要改媒介就行了,

为什么要创建一个实例呢，因为有的网站只请求一个域名的数据,假如要请求多个域名的数据,可以创建几个实例,方便后期好用

2.旧方案

直接在views下创建test_axios.vue

<template><div><button @click="test()">按钮</button></div>
</template><script>
import axios from 'axios'export default {methods:{test(){console.log("test")axios.get('/').then(res=>{console.log("res:",res);})}}
}
</script><style></style>

3.新方案（一）

在src目录下创建network文件夹
,在network文件夹下创建request.js,
增加以下内容

import axios from 'axios'export function request(config,success,failure){//1.创建一个实例const instance=axios.create({baseURL:'http://127.0.0.1:5000',timeout:5000})//2.instance.interceptors.response.use(res=>{//响应的内容很多,包括一些状态之类的,这里我们只需要data信息return res.data},err=>{console.log(err)})//3.发送真正的网络请求instance(config).then(res=>{success(res)}).catch(err=>{failure(err)})
}

新增test1_axios.vue
目录:src/views/test1_axios.vue

<template><div><button @click="test()">按钮</button></div>
</template><script>
import { request } from "../network/request";export default {data: function () {return {message: 'msg',};},created: function () {//如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,建议接口不复杂会放created里面,接口多复杂的话会放在mounted里面.this.fetch();},//方法methods: {fetch() {request({url: "",},(res) => {console.log(res);});},},
};
</script><style>
</style>

4.为什么要用拦截器

export function request(config,success,failure){//1.创建一个实例const instance=axios.create({baseURL:'http://127.0.0.1:5000',timeout:5000})//2.axios的拦截器//2.1请求拦截//1.比如`config`中的一些信息不符合服务器的要求,config就是请求的内容//2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标,比如:加         载中//3.某些网络请求(比如登录token),必须携带一些特殊的信息instance.interceptors.request.use(config=>{return config},err=>{console.log(err)})//2.2响应拦截instance.interceptors.response.use(res=>{//响应的内容很多,包括一些状态之类的,这里我们只需要data信息return res.data},err=>{console.log(err)})//3.发送真正的网络请求instance(config).then(res=>{success(res)}).catch(err=>{failure(err)})
}

(新方案二)

在src目录下创建api目录
src\api\brand.js
src\api\login.js
src\utils\request.js
创建brand.js

import request from '@/utils/request'
export function fetchList(params) {return request({url:'/brand/list',method:'get',params:params})
}
export function createBrand(data) {return request({url:'/brand/create',method:'post',data:data})
}
export function deleteBrand(id) {return request({url:'/brand/delete/'+id,method:'get',})
}

再创建一个login.js

import request from '@/utils/request'export function login(username, password) {return request({url: '/admin/login',method: 'post',data: {username,password}})
}export function getInfo() {return request({url: '/admin/info',method: 'get',})
}
export function fetchList(params) {return request({url: '/admin/list',method: 'get',params: params})
}

src\views\axios_test2.vue
在axios_test2.vue中,添加以下内容

<template><div><button @click="getList" >获取列表</button> 读取列表的数据:{{getlist}} </div>
</template>
<script>
//两种方法
//import {fetchList} from '../api/brand';
import {fetchList} from '@/api/brand';
export default {data() {return {getlist: "",};},methods: {getList() {fetchList().then((response) => {this.getlist = response.data;console.log("response:", response);});},},
};
</script>

src\utils\request.js

import axios from 'axios'// 创建axios实例
const service = axios.create({baseURL: "http://192.168.19.199:5000/", // api的base_urltimeout: 5000 // 请求超时时间
})export default service

前端Vue学习之路(四)axios请求数据相关推荐

前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
Vue学习（slot、axios）-学习笔记
文章目录 Vue学习(slot.axios)-学习笔记 slot 插槽 axios 交互 Vue学习(slot.axios)-学习笔记 slot 插槽父: <template> < ...
Vue学习(一)基本属性、Axios通信、插槽、官方脚手架搭建
layout: post title: Vue学习(一)基本属性.Axios通信.插槽.官方脚手架搭建 description: Vue学习(一)基本属性.Axios通信.插槽.官方脚手架搭建 tag ...
vue学习笔记（四）- cmd无法识别vue命令解决方法
vue学习笔记(四)- cmd无法识别vue命令解决方法参考文章: (1)vue学习笔记(四)- cmd无法识别vue命令解决方法 (2)https://www.cnblogs.com/suRimn ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
Java多线程学习之路(四)---死锁(DeadLock)
Java多线程学习之路(四)-死锁(DeadLock) 1.定义死锁就是多个线程在竞争共享资源的时候,相互阻塞,不能脱身的状态(个人理解).其实死锁一定程度上可以看成一个死循环. 举个现实生活中的例 ...
Vue学习之路（基础篇）
Vue学习之路(基础篇)

前端Vue学习之路(四)axios请求数据

axios