大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46，售后保障稳定
1、安装
npm install axios --save
2、在main.js中写入一下代码
import axios from 'axios'
Vue.prototype.axios = axios
3、调用
下面源码是直接使用axios来调用后台的接口示例：
this.axios({
url: '',//请求地址
method:'POST',//请求方法
responseType: 'json',//返回值类型
params: {
arg1: "arg1"//请求携带参数
}
}).then(res => {
console.log(res)//请求成功
}).catch(error => {
console.log(error);//请求失败
})
使用拦截器—添加
在src创建util目录，在里面创建request.js文件
import axios from 'axios';
const service = axios.create({
baseURL: "http://127.0.0.1:8080/projectName",//请求地址前缀
timeout: 0
});
// 请求拦截器
service.interceptors.request.use(
config => {
//添加请求头部参数
config.headers['arg1'] = "arg1Value";
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
//拦截到成功的数据
return response.data;
},
error => {
//拦截到失败的数据
return Promise.reject(error);
}
);
export default service;
在src创建api目录，在里面创建user.js文件
import request from '@/utils/request'; //引入request.js
export function getUserInfo(data) {
return request({
url: 'userController/getUserInfo',
method: 'post',
data: data
});
}
4、Vue页面调用拦截器
<template>
<div>
<h1>{
{userInfo}}</h1>
</div>
</template>
<script> //引入api import {
getUserInfo } from './api/user.js'; export default {
date(){
return{
userInfo: {
} } }, mounted(){
const par = {
arg1: "arg1Value"}; //调用api getUserInfo(par).then(re=>{
//请求成功 返回re this.userInfo = re.data; }).catch(err=>{
//请求失败 }) } } </script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/203201.html原文链接：https://javaforall.net
