get、post、delete和put请求区别及用法

简单请求和复杂请求的区别

简单请求：get,post

img的src、script的js可以发起get请求，获取数据（类似于对数据库的select操作），post提交数据（类似于对数据库的insert操作），请求可以发起，而服务端可以进行拒绝，浏览器认为这是安全的。

复杂请求：put,delete

put请求，更新数据（类似于对数据库的update操作），delete请求，删除数据（类似于对数据库的delete操作），这两个请求为复杂请求，需要option预检。

复杂请求需要预检的原因

需要预检是为了保证跨域的安全性。浏览器限制跨域请求一般有两种方式：

• 浏览器限制发起跨域请求
• 跨域请求可以正常发起，但是返回的结果被浏览器拦截了

一般浏览器都是第二种方式限制跨域请求，那就是说请求已到达服务器，并有可能对数据库里的数据进行了操作，但是返回的结果被浏览器拦截了，那么我们就获取不到返回结果，这是一次失败的请求，但是可能对数据库里的数据产生了影响。
为了防止这种情况的发生，规范要求，对这种可能对服务器数据产生副作用的HTTP请求方法，浏览器必须先使用OPTIONS方法发起一个预检请求，从而获知服务器是否允许该跨域请求：如果允许，就发送带数据的真实请求；如果不允许，则阻止发送带数据的真实请求。

get和post区别

• 传输数据长度限制：get:2KB,post:无限制
• 安全性：get参数在url中可见，post数据在head头内，不可见，因此安全性post比较高，如果传输用户名密码，用post更加安全
• 数据类型：get:只允许ASCII码，post:对于数据类型无限制
• 数据交互：get:在TCP第三次握手时携带数据，post：在TCP第三次握手时发送post请求头，服务器返回100
  continue，客户端再发送数据。因此，get的响应速度比较快

vue中axios进行请求的方法

//首先导入并配置axios
// 配置axios
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 请求拦截器添加token
// 在request拦截器中显示进度条NProgress.start()
axios.interceptors.request.use(config =>{
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem("token")
  return config
})
// 在response拦截器中隐藏进度条NProgress.done()
axios.interceptors.response.use(config =>{
  NProgress.done()
  return config
})
Vue.prototype.$http = axios

//get请求
this.$http.get('url',{params:{id:1，name:'LiLi'}})
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)})

//post请求
this.$http.post('url',{id:1,name:'LiLi'})
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)})

//put请求 
this.$http.put('url', {id: 123,name: 'LiLi'})
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)})

//delete请求
this.$http.delete('url', {id: 123})
.then(res=>{console.log(res)})
.catch(err=>{console.log(err)})