---

---

前言

????在Vue項目中，高效的前后端通信是構建豐富用戶體驗的關鍵。axios作為前端與后端溝通的橋梁，其重要性不言而喻。本文將帶您領略axios的魅力，從基本概念、安裝方法，到高級應用技巧，助您快速掌握在Vue中利用axios進行HTTP請求的精髓。我們不僅會探討axios的基礎用法，如GET、POST請求，還將深入探索跨域配置、全局注冊以及設置攔截器等高級功能，助您輕松實現優雅的前后端通信。

---

一、axios 請求

1. axios的概念

axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。簡單的理解就是ajax的封。

它本身具有以下特征：

• 從瀏覽器中創建 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF

2. axios的安裝

npm install axios --save

3. axiso請求方式介紹

使用格式：

axios.提交方式("請求接口路徑").then(箭頭函數).catch(箭頭函數)- 提交方式有get post delete put 等,- .then() 請求成功后執行then方法- .catch()請求失敗后執行catch方法

例如:get具體使用方法如下：

//使用axios發送ajax請求,獲取所有新聞信息fnSerachNews(){// result是服務端對我們發起請求的響應，請求成功執行then方法this.$axios.get("http://localhost:8000/news/").then((result) => {//通過response獲取具體數據，賦值給data中定義的newslist this.newslist = result.data.dataconsole.log(result.data.data);}).catch((err) => {//請求失敗執行catch方法alert(err)});},

4. axios請求本地數據

1. 在static文件夾底下新建json文件

2. data.json數據格式如下：

{"first":[{"name":"張三","nick":"法外狂徒"},{"name":"李四","nick":"小李子"},{"name":"王五","nick":"小五"}]
}

3. 在創建的TestView.vue中實現獲取本地數據

<template><div><button @click="getData">獲取本地數據</button><p>{{ data.first }}</p><ul v-for="(n, index) in data1.first" :key="index"><li>{{ n.name }}</li><li>{{ n.nick }}</li></ul></div>
</template><script>
import Axios from "axios";
export default {name: "test",data() {return {// 定義變量, object 類型.data1: {},};},methods: {getData() {//   使用axios 請求本地數據//   axios.請求方式("請求接口路徑").then(箭頭函數).catch(箭頭函數)Axios.get("../../../a.json").then((response) => {// 把獲取到的數據賦值給變量,然后展示console.log(response);console.log(response.data, typeof response.data);this.data1 = response.data;}).catch((error) => {// 請求失敗console.log(error);});},},
};
</script>
<style lang="scss" scoped></style>

5. axios跨域

跨域的簡單介紹及后端解決辦法：點這0.0

這里在前端解決跨域：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave:false, /*關閉語法檢查*///開啟代理服務器（方式一）vue3可能會由問題，如果第一種方式不可以，使用下面方式devServer: {proxy: 'http://127.0.0.1:8000'}, //開啟代理服務器（方式二）devServer: {proxy: {//第一個跨域代理'/app': {target: 'http://127.0.0.1:8000/', //接口域名changeOrigin: true,             //是否跨域ws: true,                       //是否代理 websocketssecure: false,                   //是否https接口// pathRewrite: {    //路徑重置如果需要重置，可以重置成target地址//     '^/app':''// }},//第二個跨域代理'/home': {target: 'http://127.0.0.1:8000/',ws: true, //用于支持websocketchangeOrigin: true //用于控制請求頭中的host值// pathRewrite: {                  //路徑重置//     '^/app':''// }}}}
})

6. axios全局注冊

// main.js
import { createApp } from 'vue'
import App from './App.vue'import  Axios  from "axios";
// 跨越配置好以后，測試結果
// Axios.defaults.baseURL = "http:127.0.0.1:8000"
const app = createApp(App)app.config.globalProperties.$axios = Axiosapp.mount('#app')

7. axios支持的請求類型

1）get請求

不帶請求參數：

• 方式一: axios({ methods: 'get', url: '/ulr' })
• 方式二: axios.get('/url')

帶請求參數：

• 方式一: axios.get('/url', {params: {id: 12}})
  • 請求的地址實際為 http://localhost:8080/url?id=12
• 方式二: axios({
  ??????????methods: ‘get’,
  ??????????url: ‘url’,
  ??????????params: {
  ??????????????id:12
  ?????????? }
  ????????})

2）post請求

let data = {}
let config = {}
方式一:  axios.post('/url',data,config)
方式二:  axios({methods: 'post',url: '/url',data: data,config: config
})

3）put請求

該請求和post類似，只是請求方法接口不同，傳入對象的methods不同

4）patch請求

該請求和post類似，只是請求方法接口不同，傳入對象的methods不同

5）delete請求

axios.delete('/url', {params: {id: 12}}) #參數在url params---很重要
axios.delete('/url', {data: {id: 12}}) #參數在請求體中 將params改為 data就行　

---

二、axios 進階

1. 設置axios攔截器

什么是攔截器

request請求攔截器：發送請求前統一處理，如：設置請求頭headers、應用的版本號、終端類型等。


response響應攔截器：有時候我們要根據響應的狀態碼來進行下一步操作，例如：由于當前的token過期，接口返回401未授權，那我們就要進行重新登錄的操作。

攔截器的作用和使用

1. 作用：

• 比如config中的一些信息不符合服務器的要求，得及時攔截下來更改。
• 比如每次發送網絡請求的時候，都希望在界面中顯示一個動態加載的請求圖標，就是一直在轉圈圈，讓用戶知道當前頁面正在加載數據，準備渲染視圖。
• 比如某些網絡請求（比如登錄token）,必須攜帶一些特殊的信息。

2. 實現步驟：

const instance = axios.create({//baseURL:url,timeout:5000  // 延時
})1、在requesr.js中設置請求攔截器
interceptors.request.use（）
2、設置響應攔截器
interceptors.response.use()

核心代碼：

// 請求攔截
instance.interceptors.request.use(function (config) {console.group('全局請求攔截')console.log(config)return config},function (err){return Promise.reject(err)}
)// 響應攔截
// 服務器返回數據之后都會先執行此方法
instance.interceptors.response.use(function (response){console.group('全局響應攔截')console.log(response)return response},function (err){return Promise.reject(err)}
)

2. axios 封裝

//  utils/request.js
import axios from "axios";
// const baseURL = "http://127.0.0.1:8000"; // 更換成自己的API接口地址
const axiosIns = axios.create({
//   baseURL,timeout: 10 * 1000 // 超時時間設置為10秒
});
// 封裝get請求,并將封裝的方法暴露出去
export const get = (url, params) => {return axiosIns.get(url,{params})
}
// 封裝post請求
export const post = (url, data) => {return axiosIns.post(url,data)
}
// 封裝put請求
export const put = (url, data) => {return axiosIns.put(url,data)
}
// 封裝delete請求
export const del = (url, data) => {return axiosIns.delete(url,{data})
}
................................................
// 封裝getget("https:/localhost:8000/news", {page: 3,per: 3,}).then((resp) => {console.log(resp.data);}).catch((error) => {console.log(error);});
....................................................        
// 封裝post
post('https:/localhost:8000/news/login',{userName:'xiaoming',password:'111111'}).then(res=>{console.log(res)}).catch(err=>{console.log(err)})

---