vue3二次封装

1.下载npm install axios

2.下载npm install @types/axios -D

先创建utils文件

在utils里创建request.ts

这是一层封装

import axios from 'axios'; axios.defaults.timeout = 30000; axios.defaults.baseURL = "http://47.94.4.201" // 添加响应拦截器 axios.interceptors.response.use(function (response) { //可以写if判断，提前拦截错误信息 console.log(response); return response; }, function (err) { return Promise.reject(err); }); 只有get这一个是这莫长的代码 export function get(url: string, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params, headers: { "token": sessionStorage.getItem('token') } }).then(res => { resolve(res.data); }).catch(err => { reject(err.data) }) }); } post delect剩下的就是这样短的 export function post(url: string, data = {}) { return new Promise((resolve, reject) => { axios({ url, data, method: 'post', }).then(res => { resolve(res.data); }).catch(err => { reject(err.data) }) }); }

在utils里创建http.ts这是二层封装

import {post,get} from "../utils/request"; // 注册 export function zhu(query: any) { return new Promise((resolve, reject) => { post('/index.php/index/index/register', query).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 验证码 export function yan(query: any) { return new Promise((resolve, reject) => { get('/index.php/index/index/getcode', query).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 登录 export function deng(query: { name: string; pwd: string }) { return post('/index.php/index/index/login', query); } // 超级企业列表 export function shu(data) { return new Promise((resolve, reject) => { get('/index.php/index/call/getsuperes', data).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 搜索 export function sou(data) { return new Promise((resolve, reject) => { post('/index.php/index/call/getsearches', data).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 添加 export function tian(data) { return new Promise((resolve, reject) => { post('/index.php/index/call/addsuper', data).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 详情 export function xiang(data) { return new Promise((resolve, reject) => { post('/index.php/index/call/getsuperbyid', data).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } // 状态 export function zhuang(data) { return new Promise((resolve, reject) => { post('/index.php/index/call/upsuperstatus', data).then(res => { resolve(res) }).catch(err => { reject(err) }) }) }

这是二层封装

在哪里用就import { } from "@/utils/https";