Vue3使用axios

最新推荐文章于 2024-08-30 11:26:32 发布

emgexgb_sef

最新推荐文章于 2024-08-30 11:26:32 发布

阅读量158

点赞数

分类专栏：前端 html 文章标签： css 前端 html

本文链接：https://blog.csdn.net/emgexgb_sef/article/details/123304244

版权

本文档介绍了在 Vue3 项目中如何安装并配置 axios，包括创建 config.js 拦截器和设置域名，以及在 main.js 中的引用方式。在 Vue3 中，由于没有 vue.prototype，因此需采用新的引用方式。同时，文章提到了在 setup 函数中使用 proxy 调用接口的方法。

摘要由CSDN通过智能技术生成

一直用UNIAPP，这次项目要用vue来写，就比较纠结
装了vue3，然后挺多不适应的，记录下接口使用吧

安装

$ npm install axios --save

创建config.js

这里创建拦截器跟配置域名

import axios from 'axios';
import { ElMessageBox } from 'element-plus';

const config = {
  // baseURL: process.env.baseURL
  baseURL: 'https://www.baidu.com/api',
  timeout: 1000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
};

const api = axios.create(config);

// 默认 post 请求，使用 application/json 形式
api.defaults.headers.post['Content-Type'] = 'application/json';


//封装下post
api.post = function(url,params){
      return new Promise((resolve, reject) => {
        // console.log("****************************");
        axios({
          method: 'post',
          url:config.baseURL + url,
          params,