Vue axioxs网络请求封装

第一步： 安装axios nprogress 连个插件

npm i axios nprogress

第二步：启动接口
第三步：进行封装

请求拦截和响应拦截

封装代码如下：

import axios from "axios";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { Notify } from "vant";
import { getToken } from "./auth";
// 请求接口的基地址
export const serveUrl = "http://localhost:1337";
const instance = axios.create({
baseURL: serveUrl,
timeout: 5000,
});
// Add a request interceptor
// 拦截器。全局请求拦截 全局相应拦截
// https://github.com/axios/axios#interceptors
// 发送网络请求之前执行
instance.interceptors.request.use(
function (config) {
NProgress.start();
// Do something before request is sent
// token的添加方式不是固定的每一个接口文档都会有说明
// honey-home 这套接口的传递token这样写
config.headers.token = getToken();
return config;
},
function (error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
// 网络请求完成之后执行
instance.interceptors.response.use(
function (response) {
NProgress.done();
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
return response.data;
},
function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
// 全局的网络请求异常处理
Notify({
message:
error.response.status +
"|" +
(error.response.data.message
? error.response.data.message
: error.response.data.info),
type: "danger",
});
NProgress.done();
return Promise.reject(error);
}
);
/**
* 发送一个get请求
* @param {*} url
* @param {*} params
* @returns
*/
export const get = (url, params) => instance.get(url, { params });
/**
* 发送一个post请求
* @param {*} url
* @param {*} data
* @returns
*/
export const post = (url, data) => instance.post(url, data);
/**
* 发送一个put 请求
* @param {*} url
* @param {*} data
* @returns
*/
export const put = (url, data) => instance.put(url, data);
/**
* 发送一个delete请求
* @param {*} url
* @returns
*/
export const del = (url) => instance.delete(url);

最后

以上就是笑点低海燕为你收集整理的Vue axioxs网络请求封装Vue axioxs网络请求封装的全部内容，希望文章能够帮你解决Vue axioxs网络请求封装Vue axioxs网络请求封装所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。