axios的作用和使用是怎样，怎样避免应用中踩坑
本篇文章给大家介绍如何使用axios方式调用接口以及获取的数据渲染，希望对需要的朋友有所帮助！
1、axios的作用是什么呢？
axios主要是用于向后台发起请求的,还有在请求中做更多是可控功能。
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);
}
登录后复制 问题2：Cannot set properties of undefined (setting 'books')
或者ReferenceError: books is not defined
不能直接给变量赋值，需要通过 methods 方法中 const vm = this; 获取变量赋值；
vue 请求接口代码需要放置methods，且在created（）或者mounted()周期函数中调用该方法。
created() {
//生命周期函数（或者 mounted 函数）调用的方法才能运行
this.getShops();
}
,
methods: {
getShops: function () {
const vm = this;
//传获取的结果 给页面
}
}
登录后复制 问题3：Uncaught ReferenceError: Vue is not defined
或者Cannot read properties of undefined (reading 'get')
vue3不是通过Vue对象挂载，后面我每个页面直接引用了axios（目前vue3好像只有这种方式）
6、vue3入门总结
入门前一定要先认真阅读vue官网（https://v3.cn.vuejs.org/），了解常见函数及一些基础的用法。在开发中才能减少踩坑！！！
到此这篇关于“axios的作用和使用是怎样，怎样避免应用中踩坑”的文章就介绍到这了，感谢各位的阅读，更多相关axios的作用和使用是怎样，怎样避免应用中踩坑内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： axios的作用和使用是怎样，怎样避免应用中踩坑
本文地址： https://pptw.com/jishu/652450.html