Vue3使用axios

最新推荐文章于 2024-07-15 18:11:20 发布

drhrht

最新推荐文章于 2024-07-15 18:11:20 发布

阅读量1.5k

点赞数

分类专栏：前端 html 面试文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/drhrht/article/details/123100496

版权

本文档介绍了如何在 Vue3 项目中使用 axios 进行接口调用。从安装 axios 开始，然后创建 config.js 配置文件以设置拦截器和域名，接着在 main.js 中引入并适应 Vue3 的变化，最后展示了在 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,