Vue中request.js封装及调用示例详解
作者:ClearBoth
这篇文章主要为大家介绍了Vue中request.js封装及调用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
request.js封装
import axios, { AxiosRequestConfig } from "axios"; import qs from "qs"; // 创建axios实例 const instance = axios.create({ baseURL: process.env.VUE_APP_BASEURL, timeout: 6000, // headers: { // "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8", // token: // "MTY1Mjk1Mjg4OC42ODM2Nzg0JjJkNzUyOWQwOWU3NTU2OTE0OTU4NzI3ODUxNzkwYTNjZGMwZmRjNjAzNGQ4MGE1YzFkODE1NGVmYzk4MmMyYjM=", // }, }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 请求头和token判断等 return config; }, (err) => { return Promise.reject(err); } ); //响应拦截器 instance.interceptors.response.use( (res) => { return res.data; }, (error) => { if (error && error.response) { switch (error.response.status) { case 400: error.message = "请求错误(400)"; break; case 401: error.message = "未授权,请登录(401)"; break; case 403: error.message = "拒绝访问(403)"; break; case 404: error.message = `请求地址出错: ${error.response.config.url}`; break; case 405: error.message = "请求方法未允许(405)"; break; case 408: error.message = "请求超时(408)"; break; case 500: error.message = "服务器内部错误(500)"; break; case 501: error.message = "服务未实现(501)"; break; case 502: error.message = "网络错误(502)"; break; case 503: error.message = "服务不可用(503)"; break; case 504: error.message = "网络超时(504)"; break; case 505: error.message = "HTTP版本不受支持(505)"; break; default: error.message = `连接错误: ${error.message}`; } } else { if (error.message == "Network Error") error.message == "网络异常,请检查后重试!"; error.message = "连接到服务器失败,请联系管理员"; } return Promise.reject(error); } ); //get请求 export function get(url: string, params = {}) { return new Promise((resolve, reject) => { instance .get(url, { params: params, }) .then((response) => { resolve(response); }) .catch((err) => { reject(err); }); }); } //post请求 export function post(url: string, params = {}) { return new Promise((resolve, reject) => { instance .post(url, qs.stringify(params)) .then((response) => { resolve(response); }) .catch((err) => { reject(err); }); }); } // delete请求 export function deleteFn(url: string, params: AxiosRequestConfig<any> | undefined) { return new Promise((resolve, reject) => { instance .delete(url, params) .then((response) => { resolve(response); }) .catch((err) => { reject(err); }); }); } // put请求 export function put(url: string, params: any) { return new Promise((resolve, reject) => { instance .put(url, qs.stringify(params)) .then((response) => { resolve(response); }) .catch((err) => { reject(err); }); }); } export default instance;
调用
import { get, post, deleteFn, put } from "../utils/request"; export const login_api = (params: {} | undefined) => { return get("/XXXX/xxx", params); };
在.vue中使用之前先import进来就可以了
以上就是Vue中request.js封装及调用示例详解的详细内容,更多关于Vue request.js封装的资料请关注脚本之家其它相关文章!