vue总结之axios(使用)

简介: vue总结之axios(使用)

一、什么是axios?

Axios是一个基于promise的HTTP库,类似于jQuery的ajax,用于http请求。可以应用于浏览器端和node.js,既可以用于客户端,也可以用于node.js编写的服务端。


二、axios的使用

1.首先在项目文件夹下打开cmd命令行输入

npm install axios -S

2.然后再在main.js全局注册axios

vue2

import axios from 'axios'
Vue.prototype.$axios = axios

vue3

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
createApp(App).use(axios).use(router).mount('#app')

然后就可以进行使用了


axios请求格式

注意vue2使用axios时需要在axios前加上this

post请求格式

axios({
      method: "", //请求方式
      url: "", //url
      data: qs.stringify({
      }),
     }).then(function(res) {
           console.log(res);
        }).catch(function (err) {
            console.log(err); // 失败回调
        });

get请求格式

axios({
      url: "", // url
      params: {
        // 参数
      },
    }).then(function (res) {
        console.log(res); // 成功回调
      }).catch(function (err) {
        console.log(err); // 失败回调
      });
相关文章
|
5天前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
10 1
|
13天前
|
JavaScript
vue对axios封装
vue对axios封装
17 2
|
13天前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
15 2
|
5天前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
11 0
|
13天前
|
JavaScript 前端开发 Java
vue使用axios与springboot通讯
vue使用axios与springboot通讯
13 0
|
2月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
2月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
2月前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
2月前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
118 0
|
2月前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
26 0