vue3简单封装axios

简介: vue3简单封装axios

vue3简单封装axios


安装依赖

npm install axios --save
npm install qs --save

在项目目录中创建axios.js

网络异常,图片无法展示
|

import axios from "axios";
import qs from "qs";
// axios.defaults.baseURL = ''  //正式
axios.defaults.baseURL = 'http://127.0.0.1:8080' //测试地址,按需更改
//post请求头
axios.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded;charset=UTF-8";
//允许跨域携带cookie信息
axios.defaults.withCredentials = true;
//设置超时
axios.defaults.timeout = 15000;
axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
axios.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  error => {
    window.alert(JSON.stringify(error), '请求异常', {
      confirmButtonText: '确定',
      callback: (action) => {
        console.log(action)
      }
    });
  }
);
export default {
  /**
   * @param {String} url
   * @param {Object} data
   * @returns Promise
   */
  post(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'post',
        url,
        data: qs.stringify(data),
      })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        });
    })
  },
  get(url, data) {
    return new Promise((resolve, reject) => {
      axios({
        method: 'get',
        url,
        params: data,
      })
        .then(res => {
          resolve(res.data)
        })
        .catch(err => {
          reject(err)
        })
    })
  }
};

在main.js中

import axios from './util/axios';
app.config.globalProperties.$axios = axios;

封装api使用

import axios from "./axios";
let {get, post } = axios
//get举例
 export const getCaptcha = data => get("/xxxx",data)
//POST
export const postModel = data => post("/xxxx",data)

在组建中调用api

import {getCaptcha, postModel} from "@/request/api"
// 放在函数,或者生命周期里
postModel({
 //data
}).then(res => {
  console.log(res)
})


相关文章
|
9天前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
32 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
14天前
|
资源调度 JavaScript
|
14天前
|
缓存 JavaScript 搜索推荐
|
4天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
28 4
|
9天前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
59 1
|
12天前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
73 1
|
4天前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
21 0
|
2月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
2月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。