本篇文章為大家介紹如何使用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，感覺有些臃腫）。请求状态码：{{code}},请求状态：{{msg}}
编号 图书名称 作者 {{item.id}} {{item.name}} {{item.author}}
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中文網其他相關文章！
