Vue如何封装axios与后端交互

最新推荐文章于 2024-07-03 08:00:00 发布

置顶张音乐

最新推荐文章于 2024-07-03 08:00:00 发布

阅读量553

点赞数

分类专栏： JS | Vue | React | 前端踩坑实战教程文章标签： vue axios

本文链接：https://blog.csdn.net/qq_29777207/article/details/107428326

版权

JS | Vue | React | 前端踩坑实战教程专栏收录该内容

32 篇文章 131 订阅 ¥29.90 ¥99.00

订阅专栏

本文详细介绍了在Vue项目中如何封装axios，并在src/service目录下创建index.js文件进行配置。通过在main.js引入axios，并在组件中正确使用，避免使用箭头函数导致的`this`指向问题，可以方便地实现与后端的交互。

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

一、在src目录下创建service文件夹，在service文件夹下创建index.js

二、index.js文件内容

import axios from 'axios'

let http = axios.create({
    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'http://127.0.0.1:8082',
    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: true,
    // `headers` 是即将被发送的自定义请求头
    headers: {
        /*'X-Requested-With': 'XMLHttpRequest',*/
        /*'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',*/

了解本专栏