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

總結

以上是生活随笔為你收集整理的前端Vue学习之路(四)axios请求数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。