本篇文章為大家介紹如何使用axios方式呼叫介面以及所取得的資料渲染，希望對需要的朋友有幫助！
1、axios的作用是什麼呢？
axios主要是用於向後台發起請求的,還有在請求中做更多是可控功能。 【相關推薦：vue.js影片教學】
2、專案安裝axios及其他環境
開啟cmd進入專案根目錄（src同級目錄） ，輸入指令 npm install axios
3、新建##axios.js 內容複製以下
axios.js
import axios from "axios";
import qs from "qs";
// axios.defaults.baseURL = '' //正式
axios.defaults.baseURL = 'http://localhost:8099' //测试
//post请求头
axios.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded;charset=UTF-8";
//设置超时
axios.defaults.timeout = 10000;
axios.interceptors.request.use(
config => {
return config;
},
error => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
response => {
if (response.status == 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
alert(`异常请求：${JSON.stringify(error.message)}`)
}
);
export default {
post(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url,
data: qs.stringify(data),
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
});
})
},
get(url, data) {
return new Promise((resolve, reject) => {
axios({
method: 'get',
url,
params: data,
})
.then(res => {
resolve(res.data)
})
.catch(err => {
reject(err)
})
})
}
};4、直接在vue頁引用， axios.get或.post方法
（vue2需要在main.js中掛載全域，vue3每次引用都需要 import，感覺有些臃腫）。<template>
<div>
<table>
<tr>
<td>编号</td>
<td>图书名称</td>
<td>作者</td>
</tr>
<tr v-for="item in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.author}}</td>
</tr>
</table>
请求状态码：{{code}},请求状态：{{msg}}
</div>
</template>
<script>
import axios from '../js/axios';
export default {
name: "Book",
data() {
return {
code: "",
msg: "",
books: [],
}
},
created() { //生命周期函数（或者 mounted 函数）调用的方法才能运行
this.getShops();
},
methods: {
getShops: function () {
const vm = this;
axios.get("/book/findAll", {
// id: 1
}).then(function (response) {
console.log(response.data);
let results = response.data || [];
let code = response.code;
let msg = response.msg;
if (results && results.length > 0) {
// 获取搜索到的商品
vm.code = code;
vm.msg = msg;
vm.books = results;
}
}).catch(function (error) {
console.log(error);
vm.code = 0;
vm.msg = error;
vm.books = [];
})
}
}
}
</script>
5、踩坑記錄
問題1：vue3 axios Error: Network Error 跨域請求問題，我是在後端攔截器類別中處理的，重寫addCorsMappings 方法 //跨域问题
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedHeaders("*")
.allowedMethods("*")
.allowedOriginPatterns("*")
.allowCredentials(true);
}const vm = this; 取得變數賦值；
vue 請求介面程式碼需要放置methods，且在created（）或mounted()週期函數中呼叫該方法。created() { //生命周期函数（或者 mounted 函数）调用的方法才能运行
this.getShops();
},
methods: {
getShops: function () {
const vm = this; //传获取的结果 给页面
}
}##vue3不是透過後面物件掛載，我每個頁面直接引用了axios（目前vue3好像只有這種方式）
入門前一定要先認真閱讀vue官網（https://v3.cn.vuejs.org/），了解常見函數及一些基礎的用法。才能在開發中減少踩坑！ ！ ！
以上是vue3 axios的使用介紹及資料渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！
