Axios简单使用与配置安装-Vue

简介: Axios简单使用与配置安装-Vue

安装Axios

npm i axios

main.js 导入

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

简单发送请求

get

getTest() {
        this.$axios({
          method: 'GET',
          url: 'https://apis.jxcxin.cn/api/title?url=https://apis.jxcxin.cn/'
        }).then(res => {
        //请求成功回调
          console.log(res)
        })
      }

post

postTest() {
 //  let data = new URLSearchParams() 表单方式
        this.$axios({
          method: 'POST',
          url: 'https://service3.91suke.com/sk/login',
          //data:data 表单方式
          data:
          {
            id: 120,
            name: '123'
            //post请求参数  这种写法是json格式的
            //     {id:120,name:'123' }
          }
        }).then(res => {//请求成功回
          console.log(res)
        })
      }

put

putTest() {
        this.$axios({
          method: 'PUT',
          url: 'www.xxxxx.com/alter',
          data:
          {
            id: 123
          }
        }).then(res => {
          consoloe.log(res)
        })
      }

delete

deleteTest() {
        this.$axios({
          method: 'DELETE',
          url: 'www.xxxxx.com/alter?id=100',
        }).then(res => {
          consoloe.log(res)
        })
      }

方法发送请求(推荐)

get

axios.get(url,params)

params,confing 非必须,参数可以直接在url拼接

this.$axios.get('https://apis.jxcxin.cn/api/title?url=https://apis.jxcxin.cn/',
          {
            params: { //请求参数对象 xxxxx?id=10
              id: 10
            }
          }).then(res => {
           console.log(res)
          })

post

this.$axios.post('https://service3.91suke.com/sk/login',
          {
            id: 123,
            name: '哈哈哈'
          }).then(res => {
            consoloe.log(res)
          })

其他方法一样

相关文章
|
1月前
|
资源调度 JavaScript 前端开发
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。
74 1
vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用
|
1月前
|
资源调度 JavaScript
|
3月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
1月前
|
缓存 JavaScript 搜索推荐
|
3月前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
2月前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
27天前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
71 4
|
2月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
39 4

热门文章

最新文章

  • 1
    若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
    116
  • 2
    axios发送post请求,如何接受和返回一个axios的字段,解决bug的方法,困难的事情先从简单做起,先从发送一个axios的post请求做起,解决方法查别人的资料,查看F12看network就行
    39
  • 3
    文本,前后端数据交互,简单请求,如何去给data数据赋值,在mounted()里赋值,利用axios发送的请求,res就是数据集,就是后端的数据,this.users = res.data.data
    44
  • 4
    Request failed with status code 400,使用axios.post要发送参数,认真比对原项目,看看有没有忘记什么?
    83
  • 5
    vue3 在 watchEffect 里中断未完成的 axios 请求(只保留最后一次请求的方法---连续点击查询按钮的优化)
    112
  • 6
    前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
    42
  • 7
    前后端数据交互,API风格组合式API和选项式API,setup是一个标识,组合式编写的意思,使定义count.value的值自增的写法,组合式API使用axios的写法,ref定义响应数据写法
    27
  • 8
    网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
    43
  • 9
    前后端数据交互之axios的路径怎样找?axios的路径是那个,是你打开Tomcat之后,出现的路径+你项目写的接口路径
    34
  • 10
    数据交互,前后端数据请求,axios请求,对象结构的使用,E6的使用,结构赋值是什么?函数形参的obj如何,函数形参的obj就改成对象结构接收传入的数据对象
    24