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); // 失败回调
      });
相关文章
|
2月前
|
资源调度 JavaScript
|
2月前
|
缓存 JavaScript 搜索推荐
|
4月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
3月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
2月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
141 4
|
3月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
3月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
46 4
|
3月前
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
64 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
2月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
35 0