有哪些方式
- Vue-resource 停止更新 几乎弃用 只有有这个东西就行 XMLHTTPrequest 封装了一个$http
- Axios 现在最长用的方式 基于 也是 XMLHTTPrequest 封装的 第三方的库
- fetch es6原生提供的方式 用的相对也比较少
Axios 交互
Axios - get
语法:
import axios form 'axios'
axios.get ( '/ 请求路径 ?key = 1 && blabla = 2' ).
返回时一个promise对象 可以调用then catch 方法
import axios form 'axios'
axios.get ( '/ 请求路径 ? key = 1 && blabla = 2' ).then((ok)+>{
// 这里ok就是接口调用成功返回的值
}).catch((error)=>{
// 这里error就是接口调用失败返回的值
})
Axios - get
import axios form 'axios'
axios.post( '/ 请求路径 ,{id:"123",name:"2"} ).then((ok)+>{
// 这里ok就是接口调用成功返回的值
}).catch((error)=>{
// 这里error就是接口调用失败返回的值
})
Axios 综合写法 (通常项目里的写法)
请求参在请求路径中 写法中 用 params
请求参数放在body体体重 用data
<script>
// get 请求
axions({
url:"http://10.xx.xxx.xdxx/get",
mtehod:"get",
params:{
id:"210340.213123",
name:"123123213"
}
}).then((ok)=>{
// ok message
}).catch((error)=>{
//error message
})
// post 请求
axions({
url:"http://10.xx.xxx.xdxx/get",
mtehod:"post",
data:{
id:"210340.213123",
name:"123123213"
}
}).then((ok)=>{
// ok message
}).catch((error)=>{
//error message
})
//put delete 同理
</script>