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)
          })

其他方法一样

相关文章
|
28天前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
28天前
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
8天前
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
28天前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
1月前
|
JavaScript 前端开发
vue引入axios出现Module parse failed: Unexpected token (5:2)
vue引入axios出现Module parse failed: Unexpected token (5:2) 页面显示 Cannot GET /
|
2月前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
49 1
|
3月前
|
前端开发 JavaScript API
技术经验分享:axios的全局配置baseUrl
技术经验分享:axios的全局配置baseUrl
88 3
|
2月前
|
JSON JavaScript 前端开发
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
在Vue项目中,高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁,其重要性不言而喻。本文将带您领略axios的魅力,从基本概念、安装方法,到高级应用技巧,助您快速掌握在Vue中利用axios进行HTTP请求的精髓。我们不仅会探讨axios的基础用法,如GET、POST请求,还将深入探索跨域配置、全局注册以及设置拦截器等高级功能,助您轻松实现优雅的前后端通信。
|
3月前
|
JavaScript
vue对axios封装
vue对axios封装
|
3月前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
30 2