Vue基础入门(二)axios简介

简介: axios简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF引入方式npm install axios --save使用axios并没有install 方法,所以是不能使用vue.use()方法的。

axios简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

引入方式

npm install axios --save
AI 代码解读

使用

axios并没有install 方法,所以是不能使用vue.use()方法的。
那么难道每个文件都要来引用一次?解决方法有很多种:

  • .结合 vue-axios使用
  • axios 改写为 Vue 的原型属性
  • 结合 Vuex的action

vue-axios使用

首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
AI 代码解读

之后就可以使用了,在组件文件中的methods里去使用了

getdata(){
            this.axios.get('/vue-demo/api/getdata').then((response)=>{
                console.log(response.data)
            }).catch((response)=>{
                console.log(response)
            })
        }
AI 代码解读

通过使用easy-mack实现一个接口的请求


img_c06ab7919dd466e73065282c7de697f3.png
1533094933431.png
img_9ca87c86fa037af5ac508c059eda726d.png
1533094944634.png

通过设置proxyTable实现跨域请求

proxyTable: { //设置地址代理,跨域请求外部链接
      '/vue-demo': {
        target: 'https://easy-mock.com/mock/5b6127a76551d73d713927c4/',
        changeOrigin: true,
        pathRewrite: {
          '^/vue-demo': '/vue-demo'
        }
      }
    }
AI 代码解读
npm run dev
AI 代码解读

访问地址通过一个组件的触发请求easy-mock的接口,就可以看到返回的数据了


img_db0661a5eb91988ba9e70a911aba2489.png
1533095093186.png

axios 改写为 Vue 的原型属性

首先在主入口文件main.js中引用,之后挂在vue的原型链上

import axios from 'axios'
Vue.prototype.$ajax= axios
AI 代码解读

在组件中使用

this.$ajax.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
AI 代码解读

Vuex的action

在vuex的仓库文件store.js中引用,使用action添加方法

import Vue from 'Vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    user: {
      name: 'xiaoming'
    }
  },
  actions: {
    // 封装一个 ajax 方法
    login (context) {
      axios({
        method: 'post',
        url: '/user',
        data: context.state.user
      })
    }
  }
})
export default store
AI 代码解读

在组件中发送请求的时候,需要使用 this.$store.dispatch

methods: {
  submitForm () {
    this.$store.dispatch('login')
  }
}
AI 代码解读
目录
打赏
0
1
0
0
1
分享
相关文章
Ajax与Axios,以及Apifox的入门使用
本文由blue编写于2025年3月20日,主要介绍了Ajax、Axios以及Apifox的入门使用。文章首先讲解了Ajax的概念与作用,通过原生代码示例展示了如何实现异步数据交互;接着引入Axios,说明其对Ajax的封装简化了开发流程,并给出Axios实现相同功能的代码;最后详细讲述了Apifox的基本用法,包括创建接口、设置参数及生成Mock数据,为前后端开发提供了便利工具。
134 0
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
9月前
|
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
5545 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
586 5
一小时入门Vue.js前端开发
|
9月前
|
Vue3快速上手简介
Vue3快速上手简介
83 2
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
571 4
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
十分钟 带你强势入门 vue3
十分钟 带你强势入门 vue3
134 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问