目錄
一、axiox
1.1、axios 簡介
1.2、axios 基本使用
1.2.1、下載核心 js 文件.
1.2.2、發(fā)送 GET 異步請求
1.2.3、發(fā)送 POST?異步請求
1.2.4、發(fā)送 GET、POST 請求最佳實踐
1.3、請求響應攔截器
1.3.1、攔截器解釋
1.3.2、請求攔截器的使用
1.3.3、響應攔截器的使用
1.3.4、攔截器在 Vue 腳手架中的使用（最佳實踐）
一、axiox
1.1、axios 簡介
axios 用來在前端頁面發(fā)起一個異步請求，請求之后頁面不動，響應回來刷新局部.
1.為什么不使用 ajax 呢？
官方：在 jQuery 中推薦使用 ajax 技術， Vue 里面不推薦使用 jQuery 框架，因此 Vue 更推薦使用 axiox 異步請求庫（axios并不是 vue 官方庫）.
2.axios 特性
- 可以從瀏覽器中創(chuàng)建 XMLHttpRequests
- 可以從 node.js 中創(chuàng)建 http 請求.
- 支持 Promise API.
- 支持攔截請求和響應.
- 轉換請求數(shù)據(jù)和響應數(shù)據(jù).
- 取消請求.
- 自動轉換 JSON 格式數(shù)據(jù).
- 客戶端支持防御 XSRF.
1.2、axios 基本使用
1.2.1、下載核心 js 文件.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Ps：建議提前下載下來，放到一個 js 文件夾中，需要的使用引用即可（方便不聯(lián)網(wǎng)使用）.
1.2.2、發(fā)送 GET 異步請求
例如對?http://localhost:8080/user/login?username=cyk&password=1111?發(fā)送 get 請求.
Ps：通過?get 請求發(fā)送請求中，攜帶的參數(shù)不會封裝成 JSON 格式.
前端代碼如下：
axios.get("http://localhost:8080/user/login?username=cyk&password=1111")
.then(function (success) { //success 是自定義響應的參數(shù)名
//返回成功的響應
console.log(success); //響應是一個 JSON 格式(axios 自動封裝的)
console.log(success.data);
}).catch(function (error) { //error 是自定義的響應參數(shù)名
//返回失敗的響應(例如，狀態(tài)碼為 403、500......)
console.log(error);
})- then：表示返回成功的響應需要執(zhí)行的方法.
- catch：捕獲錯誤的響應，執(zhí)行對應的方法.
后端代碼如下：
@RestController
@RequestMapping("/user")
public class UserController {
@RequestMapping("/login")
public String login(String username, String password) {
if(!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
return "賬號或密碼錯誤，登錄失敗";
}
if(username.equals("cyk") && password.equals("1111")) {
return "登錄成功";
}
return "賬號或密碼錯誤，登錄失敗";
}
}
前端發(fā)送響應后，效果如下：
解釋：
- CORS 就是解決跨域問題的辦法（這里出現(xiàn)了跨域問題，系統(tǒng)給你提示解決辦法）.? 因為是前端通過 Live Server 插件打開，自動分配 5500 端口，也就意味著，你的請求是從 5500 端口發(fā)出，而后端接收響應卻是 8080 端口，這導致了跨域問題（瀏覽器禁止這個操作）
- 由于響應是錯誤的，因此被 axios 的 catch 捕獲到，通過 console.log 顯示在控制臺上.
在微服務項目中，就需要通過 Gataway 來解決.? 當前為了方便演示，使用 Spring Boot 處理，因此只需要在 controller 層上加??@CrossOrigin 注解即可解決跨域.
添加注解后后，重啟后端服務，重新發(fā)送請求，效果如下：
可以看到前端接收到的響應是一個 json 格式的響應.
1.2.3、發(fā)送 POST?異步請求
例如對?http://localhost:8080/user/login?發(fā)送 POST?請求，攜帶 JSON 格式參數(shù)（axios 自動轉化）：{ "username"="cyk", "password"='1111"}.
前端代碼如下：
axios.post("http://localhost:8080/user/login", { username: "cyk", password: "1111" })
.then(function (success) {
//返回成功的響應
console.log(success); //響應是一個 JSON 格式(axios 自動封裝的)
console.log(success.data);
}).catch(function (error) {
//返回失敗的響應(例如，狀態(tài)碼為 403、500......)
console.log(error);
})后端接收的時候，就要創(chuàng)建一個對應的實體類，并加上 @RequestBody 注解來接收 JSON 格式數(shù)據(jù).
@Data
public class Userinfo {
private String username;
private String password;
}
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
@RequestMapping("/login")
public String login(@RequestBody Userinfo userinfo) {
if(userinfo == null || !StringUtils.hasLength(userinfo.getUsername())
|| !StringUtils.hasLength(userinfo.getPassword())) {
return "賬號或密碼錯誤，登錄失敗";
}
if(userinfo.getUsername().equals("cyk") && userinfo.getPassword().equals("1111")) {
return "登錄成功";
}
return "賬號或密碼錯誤，登錄失敗";
}
}
發(fā)送請求后，效果如下：
1.2.4、發(fā)送 GET、POST 請求最佳實踐
通過上述方式，實現(xiàn)了 發(fā)送 GET 和 POST 請求，觀察仔細的小伙伴會發(fā)現(xiàn)，每發(fā)送一個請求就需要寫一次 請求的 ip 和 端口號，耦合度太高，后期一旦要跟換服務器的 ip 和端口號，所有地方都需要更改.
因此我們可以先創(chuàng)建好一份 axios 實例，將 服務器的 ip 和 port 提前寫好，后期需要發(fā)送請求的時候再通過這里實例發(fā)送對應的路由即可.
具體的通過 axios.create({}) 來出創(chuàng)建實例，傳入的是一個對象，對象中的參數(shù)有很多，我們只需要知道兩個最常用的即可.
- baseURL：指定請求的目的服務器 ip 和 port.
- timeout：超時時間（單位是 ms），超過時間沒有得到響應，就會直接報超時錯誤.
示例如下：
let axiosInstance = axios.create({
baseURL: "http://localhost:8080",
timeout: 5000
});
let app = new Vue({
el: "#app",
methods: {
httpGet() {
axiosInstance.get("/user/login?username=cyk&password=1111")
.then(function (success) { //success 是自定義響應的參數(shù)名
//返回成功的響應
console.log(success); //響應是一個 JSON 格式(axios 自動封裝的)
console.log(success.data);
}).catch(function (error) { //error 是自定義的響應參數(shù)名
//返回失敗的響應(例如，狀態(tài)碼為 403、500......)
console.log(error);
})
},
httpPost() {
axiosInstance.post("/user/login", { username: "cyk", password: "1111" })
.then(function (success) {
//返回成功的響應
console.log(success); //響應是一個 JSON 格式(axios 自動封裝的)
console.log(success.data);
}).catch(function (error) {
//返回失敗的響應(例如，狀態(tài)碼為 403、500......)
console.log(error);
})
}
}
});Ps：還有其他請求類型，請求格式和 POST 幾乎一樣.? 除了 DELETE 請求和 GET 幾乎一樣，一般傳遞的參數(shù)只有 id（后端根據(jù) id 刪除信息）.
1.3、請求響應攔截器
1.3.1、攔截器解釋
用來將 axios 中公共參數(shù)，響應進行統(tǒng)一處理，減少 axios 發(fā)送請求時或者接收響應時代碼的冗余.
1.3.2、請求攔截器的使用
請求攔截器：例如在微服務架構中，我們常常使用 Token 令牌作為用戶身份認證標識，也就意味著，前端發(fā)送的每個請求中都需要在 header 中添加 Token，這就需要使用 請求攔截器 做統(tǒng)一處理.
這里我們打印出來看看請求攔截器，攔截了哪些東西：
//創(chuàng)建統(tǒng)一的實例
let axiosInstance = axios.create({
baseURL: "http://localhost:8080",
});
// axios.interceptors.request.use 這里不使用這種單一創(chuàng)建的方法，而是使用統(tǒng)一的實例，如下
//請求攔截器
axiosInstance.interceptors.request.use(function (config) { // 做項目建議還是用箭頭函數(shù)：(config) => {} ，屬于懶漢加載，提高速度
//自定義參數(shù)名，攔截下來的是請求的配置
console.log(config);
return config; //這里必須要返回這個參數(shù)! 否則報錯!
});
let app = new Vue({
el: "#app",
methods: {
httpGET() {
axiosInstance.get("/user/sayHi")
.then(function (success) {
console.log(success.data);
});
}
}
});后端代碼如下：
@RequestMapping("/sayHi")
public String sayHi(String token) {
if(StringUtils.hasLength(token)) {
System.out.println(token);
}
return "hello!";
}
效果如下：
可以看到，我們通過 請求攔截器，在請求發(fā)到服務器之間，修改配置.
例如將請求攔截下來，在 url 最后加上 token 參數(shù).
axiosInstance.interceptors.request.use(function (config) {
console.log(config);
if (config.url.indexOf("?") == -1) {
// url 后面沒有設置參數(shù). 添加參數(shù)時注意加上 "?"
config.url += "?token=1234";
} else {
config.url += "&token=1234";
}
return config;
});效果如下：
1.3.3、響應攔截器的使用
響應攔截器：對后端發(fā)來的所有響應進行攔截，進行 統(tǒng)一處理.
例如可以對錯誤的響應（catch）進行統(tǒng)一的處理.
axiosInstance.interceptors.response.use(function (response) { //自定義響應參數(shù)名
console.log(response);
if (response.status == 500) {
alert("服務器出現(xiàn)錯誤");
}
//其他錯誤處理...
return response; //這里必須返回 response，否則報錯
});效果如下：
Ps：有了統(tǒng)一響應異常的統(tǒng)一處理之后，axios 中的 catch 部分就可以省略不寫了.
1.3.4、攔截器在 Vue 腳手架中的使用（最佳實踐）
在 vue 腳手架中，按照標準開發(fā)方式，會在 src 目錄下創(chuàng)建一個 utils 文件夾，然后在這個文件夾下創(chuàng)建一個 request.js 文件，專門用來封裝?axios 實例 和 攔截器.?
如下代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-762985.html
import axios from 'axios'
//構建統(tǒng)一 axios 實例
const instance = axios.create({
baseURL: "http://localhost:8060",
timeout: 5000
});
instance.interceptors.request.use(config => {
//加入 Token 數(shù)據(jù)...
//例如: 將 Token 從 localStorage 中取出來，加入到請求頭中
let username = localStorage.getItem("username");
let token = localStorage.getItem("token");
//2.將 用戶名 和 token 添加到 config 中
config.headers.set("username", username);
config.headers.set("token", token);
console.log("請求攔截器");
return config;
});
instance.interceptors.response.use((success => {
//業(yè)務邏輯處理...
console.log("成功：響應攔截器");
return success;
}), error => {
//業(yè)務邏輯處理...
//例如：
if (error.response.status == 403) {
//跳轉主頁面
router.push({ name: "Login" });
alert("很抱歉，您沒有權限，請登錄！");
}
//將異常傳遞給下一個處理
return Promise.reject(error);
})
// //暴露 instance 實例對象(這樣在其他地方就可以直接使用 instance)
export default instance;
文章來源地址http://www.zghlxwxcb.cn/news/detail-762985.html
到了這里，關于Vue 網(wǎng)絡處理 - axios 異步請求的使用，請求響應攔截器（最佳實踐）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
