前端实现vue3使用axios调用后端接口

这篇具有很好参考价值的文章主要介绍了前端实现vue3使用axios调用后端接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:在探索vue3.0的道路上调接口这件事很重要,所以我就把我探索出来的这条道展示出来,为大家提供便利,望喜欢,废话不多说展示!!!

第一步:在src下创建一个http文件夹,创建一个config的js文件!

作用是:抛出基础请求方式、基础前缀、请求头信息、参数、超时时间、凭证、后端接口返回数据类型!


//import { baseUrl } from '@/utils/global'

export default {
  method: 'get',
  // 基础url前缀
  baseUrl: process.env.BASE_URL,
  // 请求头信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: true,
  // 返回数据类型
  responseType: 'json'
}

第二步:在src下创建一个http文件夹,创建一个axios的js文件!

作用是:使用请求拦截器和响应拦截器解决下边的问题

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF
import axios from 'axios'

const request = axios.create({
    baseURL: '/api',  // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了,否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
    timeout: 5000
})

// request 请求器
// 可以自请求发送前对请求做一些处理
// 比如统一加token,对请求参数统一加密
request.interceptors.request.use(config => {
    if(config && config.headers){
        config.headers['Content-Type'] = 'application/json;charset=utf-8';
    }
    // config.headers['token'] = user.token;  // 设置请求头
    return config
}, error => {
    return Promise.reject(error)
});

// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
    response => {
        let res = response.data;
        // 如果是返回的文件
        if (response.config.responseType === 'blob') {
            return res
        }
        // 兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            res = res ? JSON.parse(res) : res
        }
        return res;
    },
    error => {
        console.log('err' + error) // for debug
        return Promise.reject(error)
    }
)


export default request

第三步:在src下创建一个http文件夹,例:创建一个data的文件夹下创建一个index.js!

作用是:这里是放你要请求的接口url、请求方式post/get、传参data最后通过export default方式抛出在页面上调用!

import axios from "../axios";

export const alldata=(data)=>{
  return axios({
    url:'/article/data',
    method:'post',
    data
  })
}


export default {alldata}

第四步:在终端输入命令!

作用是:下载axios!

npm i axios -g

第五步:在main.js根文件挂载axios!

作用是:vue3不支持以 Vue.prototype的方式绑定全局变量,只能以app.config.globalProperties.$http在全局绑定

图片示例:

vue3调用接口,vue,前端,javascript,vue.js

 文章来源地址https://www.toymoban.com/news/detail-809635.html

import axios from 'axios'

app.config.globalProperties.$http=axios;

第六步:要在vue.config.js更改配置实现跨域!

作用是:通过这个服务与另一个网络终端(一般为服务器)进行非直接的连接通过proxy也更改axios发送请求中,配置请求的根路径!

// 配置跨域
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // lintOnSave:false,
  devServer: {
    port: 8080, // 端口
    proxy: {
      '/api': {  //   若请求的前缀不是这个'/api',那请求就不会走代理服务器
        target: 'http://156.61.146.85:8078',  //这里写路径 
        pathRewrite: { '^/api': '' }, //将所有含/api路径的,去掉/api转发给服务器
        ws: true,  //用于支持websocket
        changeOrigin: true   //用于控制请求头中的host值
      },
    }
  }

})


第七步:在需调接口的页面写上所要用的方法,生命周期,初始值,引入的方法!

作用是:调接口渲染页面!

图片示例:

vue3调用接口,vue,前端,javascript,vue.js

import { reactive,onMounted} from "vue";
import {alldata} from "@/http/Home/home.js"
    export default {
    name: "app",
      setup(){
        const datas = reactive({
          value:[],
        })
        const methods = {
          requestall(){
            const data={
              pageNum:10,
              pageSize:5,
              articieId:100,
            };
            alldata(data).then(res => {
              datas.value=res
              console.log(res);
            }).catch(err => {
              console.log(err)
            })
          }
        }
        onMounted(()=>{
          methods.requestall()
        })
        return{
          ...methods
        }
      }
    }

 结果:接口调通了200状态码,参数传过去了data,接口的数据也请求到了,vue3.0前后交互达成!!!

图片示例:

                vue3调用接口,vue,前端,javascript,vue.js

 

vue3调用接口,vue,前端,javascript,vue.js 

vue3调用接口,vue,前端,javascript,vue.js 

 

 

到了这里,关于前端实现vue3使用axios调用后端接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 - 详细实现下载从服务端返回的文件流 Blob 对象教程,前端下载后端接口返回的文件流并自动保存到本地,支持任何格式的文件下载(从后端拿到二进制文件流 Blob 对象,前端实现点击下载功能)

    调用服务端(后端)接口拿到文件流,通过前端下载并保存到本地。 本文 实现了在 vue3 项目中,通过后端接口返回的二进制文件流 Blob 对象,在前端进行点击下载并保存到用户本地,任何格式的文件都可以轻松下载, 保证您直接复制代码,改个请求地址就可以使用了, 如下

    2024年02月04日
    浏览(200)
  • vue中调接口的方式:this.$api、直接调用、axios

    1. this.$api 在api文件下层级关系如下图: 在index.js下 在api.js 在componet/LeadershipScreen.js 在页面中使用 2.引用,然后直接调用 定义在api.js文件中 使用 3.axios(需要先安装axios) get post https://www.kancloud.cn/yunye/axios/234845 下面的比较好,推荐使用 4.配置request

    2024年01月21日
    浏览(42)
  • Vue axios调用springboot接口获取数据库数据并显示到网页

    可以查看简述化的此文 点击 此文简述化文章 PS **由于我自己的本次springboot项目内容很多,所以只是截取了其中关于axios调用接口获取数据的内容,还请大家了解工作原理即可** 添加axios和vue2链接 div div中使用vue语法v-for来循环列表数据item in list 当然关于数据有很多种类嘛,如

    2024年02月07日
    浏览(47)
  • 解决 Axios 跨域问题,轻松实现接口调用

    跨域是指访问另外一个域的资源,由于浏览器的同源策略,默认情况下使用 XMLHttpRequest 和 Fetch 请求时是不允许跨域的。跨域的根本原因是浏览器的同源策略,这是由浏览器对 JavaScript 施加的安全限制。 跨域请求被阻止 (Cross-Origin Request Blocked) : 这是由浏览器实施的同源策略

    2024年02月05日
    浏览(89)
  • 10 使用Vue+axios+Vuex实现登录后前端数据本地化存储实战

    这已经是《 Vue + SpringBoot前后端分离项目实战 》专栏的前端部分第8篇博客了, 服务端部分 由天哥(天哥主页)负责,目前专栏目录如下: Vue + SpringBoot前后端分离项目实战 - 前端部分 1. 手把手带你做一套毕业设计-征程开启 2. 我应该把毕业设计做到什么程度才能过关? 3

    2024年02月16日
    浏览(38)
  • SSM(Vue3+ElementPlus+Axios+SSM前后端分离)--搭建Vue 前端工程[二]

    需求分析 效果图 思路分析 使用Vue3+ElementPlus 完成。 代码实现 修改ssm_vuesrcApp.vue 成如下形式, 会删除部分用不上的代码,增加 修改ssm_vuesrcviewsHomeView.vue , 删除ssm_vuesrccomponentsHelloWorld.vue 创建ssm_vuesrccomponentsHeader.vue 修改ssm_vuesrcApp.vue , 引入Header 组件 创建全局的global

    2024年02月13日
    浏览(44)
  • Vue3 axios响应拦截器处理接口返回401未登录跳转登录页

    问题: 在 asiox 使用 useRouter 实例化创建 router 路由对象,在 response 响应拦截器里为 undefined 访问不到 使用 window.location.href = \\\'/login\\\' 跳转登录页, 本地可以正常跳转,测试环境页面会显示 not found 404, 测试环境访问地址大概是这样 ip:8080/pm/#/login , 本地没有 /pm 解决方案: 在 mai

    2024年01月21日
    浏览(46)
  • 记:vite3+vue3+axios前端项目跨域问题解决【前端和服务器nginx配置】

    前言:什么是跨域,网上一搜一大把,所以这里直接跳过,直入主题。 处理方式:不通过后端处理跨域,通过前端+服务器nginx处理。 1.前端涉及处理跨域的必要配置(开发环境、生产环境):vite3、vue3、axios 2.服务器涉及处理跨域的配置(生产环境):nginx【主要用到其配置

    2024年02月01日
    浏览(57)
  • 前端(二十七)——封装指南:Axios接口、常用功能、Vue和React中的封装技术

    😊博主:小猫娃来啦 😊文章核心: 前端封装指南:Axios接口、常用功能、Vue和React中的封装技术 在我们前端开发当中,封装是种将代码和功能组织起来以便重复使用的方式。它可以使开发人员更高效地编写、维护和管理代码。本文将探讨前端封装的定义、重要性以及在Web开

    2024年02月05日
    浏览(44)
  • vue2项目导出操作实现(后端接口导出、前端直接做导出)

    实现效果:导出列表数据 导出的内容: 后台相对来说比较简单一点,只要后端配合写接口即可 代码:放在导出事件里进行调整即可完成导出效果 效果如上:个人认为调接口导出的表格更美观一点 操作如下: 首先安装我们需要的xlxs库: 接着在我们项目文件夹/src/assets/js创建

    2024年04月11日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包