(4条消息) Vue——axios的二次封装_前端杂货铺的博客-CSDN博客
1.下载axios依赖包
npm install axios
2.在src目录下新建utils文件夹,在utils文件夹下新建request.js文件
3.request.js
import axios from 'axios'
import { Message, MessageBox } from 'element-ui' //导入element-ui组件库
// 创建axios的对象
const instance = axios.create({
baseURL: "https://api.cat-shop.penkuoer.com", //配置固定域名
timeout: 5000
})
// 请求拦截
// 所有的网络请求都会走这个方法,可以在请求添加自定义内容
instance.interceptors.request.use(
function (config) {
config.headers.token = '123456' // 请求头添加token值
config.headers.info = 'lxy' //请求头添加info值
return config
},
function (err) {
return Promise.request(err)
}
)
// 响应拦截
// 此处可以根据服务器返回的状态码做相应的数据
instance.interceptors.response.use(
function (response) {
const res = response
if (res.status === 500) {
MessageBox.alert('系统未登录,请重新登录', '错误', {
confirmButtonText: '确定',
type: 'error'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload()
})
})
return Promise.reject('error')
} else if (res.errno === 502) {
MessageBox.alert('系统内部错误,请联系管理员维护', '错误', {
confirmButtonText: '确定',
type: 'error'
})
return Promise.reject('error')
}
},
function (err) {
return Promise.request(err)
}
)
// 封装get和post请求
export function get(url, params) {
return instance.get(url, {params})
}
export function post(url, data) {
return instance.post(url, data)
}
export default instance;
方式1:(最常用使用)
在src目录下新建api文件夹,在api文件夹中新建index.js用于存放请求接口
api目录下的index.js
import request from "@/utils/request"; //导入封装请求的js文件
export function products(params) {
return request({
url: "/api/v1/products", //接口路径
method: "get", //接口方法
headers: { 'Content-Type': 'multipart/form-data' }, //给接口添加请求头
params //接口参数
});
}
export function login(data) {
return request({
url: "/api/v1/auth/login",
method: "post",
data,
// post请求接口后面拼接参数
params: {
currentOpenId: 'currentOpenId',
currentCompanyOpenId: 'currentCompanyOpenId'
}
});
}
页面使用:
<template>
<div>
<button @click="get()">封装的get</button>
<button @click="post()">post</button>
</div>
</template>
<script>
import {products,login} from "@/api/index" //导入api目录下的接口文件,并在{}中写使用的接口
export default {
methods: {
get(){
products({name:"lxy",age:18,date: new Date().getTime()}).then(res => {
console.log('res',res.data);
})
},
post(){
let obj = {
name:'lxy',
age:18
}
login(obj).then(res => {
console.log('res',res.data);
})
}
},
};
</script>
方式2:(不常用)
request.js
export function get(url, params) {
return instance.get(url, {params})
}
export function post(url, data) {
return instance.post(url, data)
}
页面使用:文章来源:https://www.toymoban.com/news/detail-514375.html
<template>
<div>
<button @click="meGet()">封装的get</button>
<button @click="mePost()">post</button>
</div>
</template>
<script>
import { get, post } from "@/utils/request";
export default {
methods: {
// 方式1 在方法里直接写api路径
meGet() {
get("/api/v1/products",{name:'aaa',age:18}).then((res) => {
console.log("res", res);
});
},
mePost() {
let obj = {
name:108
}
post("/api/v1/auth/login", obj).then((res) => {
console.log("res", res);
});
},
},
};
</script>
方式3:原生方法文章来源地址https://www.toymoban.com/news/detail-514375.html
methods:{
getMthods(){
axios.get("https://api.cat-shop.penkuoer.com/api/v1/products",{
params:{
page:3,
per:2
},
headers:{
}
})
.then(res => {
console.log('res',res);
})
},
postMthods(){
axios.post("https://api.cat-shop.penkuoer.com/api/v1/auth/login",{
name:"lxy",
age:18
},{
params:{
a:123,
b:123
}
})
.then(res => {
console.log('res',res);
})
},
}
到了这里,关于vue封装axios的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!