(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 = responseif (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)
}页面使用：
<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：原生方法
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);})},}
