- 9. axios發送請求
- ?9.0. axios的引入：
- ?9.1. axios的基本使用：
- ??9.1.1. axios發送get請求
- ??9.1.2. axios發送post請求：
- ?9.2. axios使用別名發送請求：
- ??9.2.1. axios.get()發送get請求
- ??9.2.2. axios.post()發送post請求
- ?9.3. axios使用小總結：
- ?9.4. axios的全域配置：
- ?9.5. axios的實體配置：
- ?9.6. axios的攔截器：
9. axios發送請求
Axios 是基于 promise 對Ajax的封裝
?9.0. axios的引入：
和Vue一樣，對于初學者，推薦使用cdn形式引入：
<head>
<meta charset="UTF-8">
<title>axios</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
?9.1. axios的基本使用：
?發送請求時，url 是必選的配置，此外可選配置有baseURL、methods、data、params、timeout等等
?具體可以查看官網：axios官網介紹
??9.1.1. axios發送get請求
@RequestMapping(value = "axios")
public String axios() {
return "axios";
}
@RequestMapping(value = "/test/axiosGet")
@ResponseBody
public String axiosGet(HttpServletRequest request) {
String name = request.getParameter("name");
System.out.println("-------------------name: " + name);
return "axiosGet";
}
<div id="test-axios">
<button @click="axiosGetOne">axiosGetOne</button>
</div>
<script>
new Vue({
el: '#test-axios',
methods: {
axiosGetOne: function () {
axios({
url: '/axiosGet',
baseURL: '../test', //`baseURL` 會被加到`url`前面，除非`url`已經寫全了，
method: 'get', //默認也是get請求
params: {
id: 1,
name: 'zhangsan'
}
}).then(function (response) { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosGet"
}).catch(function (error) { // 請求失敗處理
console.log(error);
});
}
}
});
</script>
?后端控制器列印zhangsan；頁面控制器輸出axiosGet
?發送有參get請求，使用params來發送引數；當然對于get請求，引數也可以攜帶在url上/test/axiosGet?id=1&name=zhangsan
??9.1.2. axios發送post請求：
??【使用data傳遞引數】：
?引數在data中攜帶，請求雖然能成功，但是后端獲取不到請求資料
·
?那是因為axios發送post請求時，默認發送的是json格式的資料，后端request.getParameter和@RequestParam是獲取不到的
@RequestMapping(value = "/test/axiosPost", method = RequestMethod.POST)
@ResponseBody
public String axiosPost(HttpServletRequest request) {
String id = request.getParameter("id");
System.out.println("-------------------id: " + id);
return "axiosPost";
}
<div id="test-axios">
<button @click="axiosGetOne">axiosGetOne</button>
<button @click="axiosPost">axiosPost</button>
</div>
<script>
new Vue({
el: '#test-axios',
methods: {
axiosPost: function () {
axios({
url: '/axiosPost',
baseURL: '../test',
method: 'post',
data: {
id: 1,
name: 'zhangsan'
}
}).then(response => { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosPost"
}).catch(error => { // 請求失敗處理
console.log(error);
});
}
}
});
</script>
?請求發送的是json格式的資料，后端
request.getParameter無法獲取引數，當然，后端用@RequestBody注解的(物體類或Map)還是可以接收到的
?當然，我們不可能每個請求都去封裝個物體類，那怎么辦呢？往下看?
@RequestMapping(value = "/test/axiosPostBean", method = RequestMethod.POST)
@ResponseBody
public String axiosPostBean(@RequestBody User user) {
System.out.println("-------------------id: " + user.getId());
return "axiosPost";
}
??【使用params傳遞引數】：
?上述問題，當我們使用params來傳遞引數，post請求成功，并且后端能夠獲取資料
·
?那是因為使用params，將請求引數都已鍵值對的形式拼接到url上了，但它還是POST請求
??【使用URLSearchParams封裝來傳遞引數】：
?使用URLSearchParams，引數不會拼接到url，后端可以
request.getParameter獲取引數
<script>
var params = new URLSearchParams();
params.append('id', 1);
params.append('name', 'zhangsan');
new Vue({
el: '#test-axiosPost',
methods: {
axiosPostOne: function () {
axios({
url: '/axiosPost',
baseURL: '../test',
method: 'post',
data: params
}).then(response => { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosGet"
}).catch(error => { // 請求失敗處理
console.log(error);
});
},
}
});
</script>
?9.2. axios使用別名發送請求：
?axios支持使用別名發送所有型別的請求，如axios.get()、axios.post、axios.put()等等
??9.2.1. axios.get()發送get請求
?axios.get(url,{config})，和axios基本用法中差不多，
<div id="test-axiosInstance">
<button @click="axiosGetOne">axiosGetOne</button>
</div>
<script>
new Vue({
el: '#test-axiosInstance',
methods: {
axiosGetOne: function () {
axios.get('../test/axiosGet', {
params: {
id: 1,
name: 'zhangsan'
}
timeout: 5000
}).then(response => { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosGet"
}).catch(error => { // 請求失敗處理
console.log(error);
});
},
}
});
</script>
??9.2.2. axios.post()發送post請求
?axios.post(url,{data},{config})，和axios基本用法中差不多，但是引數要使用"id=1&name=‘zhangsan’"鍵值對的形式傳遞
?這種形式，引數不會拼接在url
<div id="test-axiosInstance">
<button @click="axiosPost">axiosPost</button>
<button @click="axiosPostBean">axiosPostBean</button>
</div>
<script>
new Vue({
el: '#test-axiosInstance',
methods: {
axiosPost: function () {
axios.post('../test/axiosPost', "id=1&name='zhangsan'")
.then(response => { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosPost"
})
},
axiosPostBean: function () {
axios.post('../test/axiosPostBean', {
id: 1,
name: 'zhangsan'
}, {
timeout: 5000 //請求超時時間
}
).then(response => { // 請求成功處理
console.log(response.data); //data即后端回傳的資料"axiosPost"
})
}
}
});
</script>
@RequestMapping(value = "/test/axiosPostBean", method = RequestMethod.POST)
@ResponseBody
public String axiosPostBean(@RequestBody User user) {
System.out.println("-------------------id: " + user.getId());
return "axiosPost";
}
?引數不使用鍵值對的形式，仍然使用data形式，同axios基本用法中一樣，后端要用@RequestBody注解的(物體類或Map)接收才能獲取引數
?9.3. axios使用小總結：
// 請求引數為鍵值對，后端可以使用request.getParamter或@requestParam獲取引數
// 請求為json資料，后端使用@RequestBody注解的(物體類或Map)獲取引數
// get請求發送的時鍵值對引數，post請求發送的是json格式引數
// axios基本格式使用中，post請求引數使用params來發送，引數會拼接到url；或者使用URLSearchParams來封裝引數傳遞，后端都能使用request.getParamter獲取引數
// axios.post發送post請求，引數采用params來發送，引數不會拼接url，后端都能使用request.getParamter獲取引數
推薦使用簡寫的axios.post發送post請求，引數采用{id:1,name:‘zhangsan’}這個物件格式發送
?9.4. axios的全域配置：
?全域配置就是所有的axios都使用配置，一般將請求的一些共有設定進行全域配置，如timeout、baseURL等
axios.default.baseURL = "../test"
axios.default.timeout = 5000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.get(...,...);
?當然，對于配置的優先級，請求中的配置>axios實體的配置>全域配置
?9.5. axios的實體配置：
?axios.get()等使用的時默認的實體，當然我們可以通過axios.create來創建符合場景實體，在實體中可以對實體配置
<script>
// 創建實體時設定默認配置
const instance = axios.create({
baseURL: '../test',
timeout: 3000
});
// 實體創建后還可以更改配置
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 實體發送請求
instance.get(..,..)
</script>
?9.6. axios的攔截器：
?可以攔截請求或者回應在他們被 then 或 catch 處理之前，
?請求攔截器：請求之前進行攔截;axios.interceptors.request.use(成功函式，失敗函式)
<script>
axios.interceptors.request.use(config => {
console.log(config)
console.log(config.params)
return config;
}, err => {
console.log(err)
});
</script>
?回應攔截器：請求成功回應之前進行攔截;axios.interceptors.response.use(成功函式，失敗函式)
<script>
axios.interceptors.response.use(config => {
console.log("----: " + config.data)
return config.data;
}, err => {
console.log("====:" + err
)
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/224285.html
標籤：其他