首页 > 其他分享 >axios的使用

axios的使用

时间:2023-05-19 17:12:34浏览次数:72  
标签:axios console log err get result 使用

一、定义:是一个基于Promise,可以用于浏览器和node.js的HTTP客户端

二、基本用法

  1、发起请求:设置请求方法

  2、传递参数方式:

    (1)通过传统的url以?的形式传递参数

    (2)通过params形式传递参数

  3、接收响应值

 

组建:

<template>
<div>{{ msg }}</div>
</template>
<script>
export default {
data:() =>({
msg:'',
}),
created () {
const axios = require('axios');

// axios.get 发出get请求
// 请求参数拼接在 url当中
// .then接收响应【快捷键:thenc】
axios.get(
'https://httpbin.ceshiren.com/get?id=123'
).then((result) => {
console.log('get请求,通过拼接url的形式传递参数')
console.log(result)
//赋值msg
this.msg = result.data

}).catch((err) => {
console.log(err)
});
// 通过params 形式传递参数的 get请求
axios.get(
'https://httpbin.ceshiren.com/get?id=123',
{
params:{id:123}
}
).then((result) => {
console.log('通过params 形式传递参数的 get请求')
console.log(result)
}).catch((err) => {
console.log(err)
});

//post 请求
axios.post(
'https://httpbin.ceshiren.com/get?id=123'
).then((result) => {
console.log('post请求')
console.log(result)
}).catch((err) => {
console.log(err)
});
}
}
</script>

标签:axios,console,log,err,get,result,使用
From: https://www.cnblogs.com/mamilaila/p/17415783.html

相关文章

  • 使用国内镜像通过pip安装python 包
    pip安装python包时超时或是报错“CannotfetchindexbaseURLhttp://e.pypi.python.org/simple/”解决方法:加上参数"-i http://pypi.v2ex.com/simple",即换成国内镜像。一劳永逸的办法:~/.pip/下创建文件pip.conf(如果还没有的话),并填入以下内容:1[global]2timeout=6......
  • 使用jQuery加载js脚本
    动态加载Javascript是一项非常强大且有用的技术。这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js。它们很强大,但有时候也会得不偿失。如果你使用的是jQuery,它里面有一个内置的方法可以用来加载单个js文件。当你需要延迟加载一些js插件或其......
  • 字节码增强javassist 使用javassist运行时动态修改字节码对象
    java程序什么时候需要在运行的时候动态修改字节码对象?如何在运行的时候动态修改字节码对象?修改字节码对象的时候会发生哪些错误,又该如何解决这些问题?一、java程序什么时候需要在运行的时候动态修改字节码对象我认为有两种场景,一种是无法修改源代码的时候;另外一种是功能增强的......
  • js 使用 eval 函数优化条件查询
    我们在写代码的使用,经常会遇到ifelse很长很长的代码,这种要怎么优化,一直是仁者见仁智者见智的我说下我的优化方案原始代码例如:if(income<=10000){ returnincome*0.365;}elseif(income<=30000){ return(income-10000)*0.2+35600;}elseif(income<=60000)......
  • 使用 jpegoptim、OptiPNG 於 Shell 快速對圖片做壓縮
    目錄內有不少jpg、png等圖檔,想要節省空間,提高上傳速度,要如何做可以最簡便省事?註:希望品質看不出來差異,但是可以馬上看到容量減少、速度加快的效果. 使用jpegoptim、OptiPNG於Shell快速對圖片做壓縮於Shell可以安裝下述兩套程式,試用前建議先將圖片作個備份,再......
  • postman 使用心得,为什么老是不对Post的时候
    postman使用心得,为什么老是不对Post的时候原因是曾经填写过param,方法 重新新建一个request提示也可以通过导入curl的方式新建request  ......
  • 使用增强版 singleflight 合并事件推送,效果炸裂!
    hello,大家好啊,我是小楼。最近在工作中对Go的singleflight包做了下增强,解决了一个性能问题,这里记录下,希望对你也有所帮助。singleflight是什么singleflight直接翻译为”单(次)飞(行)“,它是对同一种请求的抑制,保证同一时刻相同的请求只有一个在执行,且在它执行期间的相同请求都......
  • Vue项目中使用mock
    概念:mock是一个模拟数据生成器,旨在帮助前端独立于后端进行开发,帮助编写单元测试。mock有如下功能:根据数据模板生成模板数据模拟ajax请求,生成请求数据基于html模板生成模拟数据安装mockjsnpminstallmockjs在src文件夹下新建mock文件夹5.在mock文件夹下新建index.js文件引入mock......
  • Cookie的使用(js-cookie插件)
    1.js-cookie一个简单,轻巧的JavaScriptAPI,用于处理Cookie2.安装npminstalljs-cookie--save3.引用importCookiesfrom'js-cookie'Vue.prototype.$Cookies=Cookies;4.创建<!--作者:zhangfan页面名称:Cookie的使用(js-cookie插件)--><template><divid="produc......
  • 使用Vue脚手架工具快速搭建vue项目
    全局安装webpack使用npm(需要安装node环境)全局安装webpack,打开命令行工具输入:npminstallwebpack-g或者(npminstall-gwebpack),安装完成之后输入webpack-v,如下图,如果出现相应的版本号,则说明安装成功。全局安装vue-cli,在cmd中输入命令:(cnpminstall-g@vue/cli)用vue-cli来构建......