axios请求---基础用法

Axios是一个基于promise的HTTP库，可以在浏览器和nodejs中使用。主要用于户向后台发起请求，还有在请求中做更多的可控功能。它有如下特点：

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

使用axios请求之前的准备工作

安装axios

使用npm

npm install --save axios

使用bower

bower install --save axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

因为axios不是vue的插件，所以在使用之前需要先引入

import axios from 'axios'

Axios的基础用法：包含以下请求（get,post,put,patch,delete）

axios执行get请求

//不带参数
axios.get('/contactList').then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})
//带请求参数,写法一
axios.get('/contactList?id=1').then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})
//带请求参数,写法二
axios.get('/contactList',{
  params: {
    id: 1
  }
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
}) 

axios执行post请求

axios.post('/contact/new/json',{
  name: '小六',
  tel: '13210159745'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(res)
})

axios执行put请求

axios.put('/contact/edit',{
  name: '小六',
  tel: '13210159745'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(res)
})

axios执行patch请求

axios.patch('/contact/edit',{
  name: '小六',
  tel: '13210159745'
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(res)
})

axios执行delete请求

axios.delete('/contact',{
   params: {
    id: 1
  }
}).then(res=>{
  console.log(res)
}).catch(err=>{
  console.log(err)
})

axios POST 提交数据的三种请求方式写法