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); // 失败回调
      });
相关文章
|
6天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
14 0
|
6天前
|
JSON 前端开发 JavaScript
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
3分钟让你学会axios在vue项目中的基本用法(建议收藏)
97 0
|
6天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
6天前
|
JSON 前端开发 JavaScript
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
Vue+Axios+SpringBoot后端同时接收文件和json作为请求参数
41 0
|
6天前
|
前端开发 应用服务中间件 nginx
Vue+SpringBoot+Axios的跨域问题
Vue+SpringBoot+Axios的跨域问题
21 0
|
6天前
|
JavaScript
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
vue element upload组件配合axios实现用 “Content-Type“: “multipart/form-data“上传方式导入xls文件
|
6天前
|
JavaScript 数据格式
Vue axios请求拦截和相应拦截
Vue axios请求拦截和相应拦截
22 2
|
6天前
|
JavaScript API
Vue中axios拦截器怎么使用
Vue中axios拦截器怎么使用
|
6天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
35 1
|
6天前
|
前端开发 JavaScript Java
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
springboot+mybatis plus+vue+elementui+axios 表格分页查询demo
36 0