axios
1.增加新知识2.旧方案3.新方案（一）4.为什么要用拦截器(新方案二)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
