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

安装Axios

npm i axios

main.js 导入

javascript 复制代码
import Axios from 'axios'
Vue.prototype.$axios = Axios

简单发送请求

get

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

post

javascript 复制代码
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

javascript 复制代码
 putTest() {
        this.$axios({
          method: 'PUT',
          url: 'www.xxxxx.com/alter',
          data:
          {
            id: 123
          }
        }).then(res => {

          consoloe.log(res)
        })
      }

delete

javascript 复制代码
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拼接

javascript 复制代码
        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

javascript 复制代码
this.$axios.post('https://service3.91suke.com/sk/login',
          {
            id: 123,
            name: '哈哈哈'

          }).then(res => {
            consoloe.log(res)
          })

其他方法一样

相关推荐
y先森26 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy26 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891129 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js