fetch
- 是不需要导入其它包, 就可以直接使用的
GET
发送get请求代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fetch</title>
<script src="vue.js"></script> <!--导入本地vue.js-->
</head>
<body>
<div id="box">
<button @click="handleFetch"> ajax-fetch:发送GET请求 </button>
</div>
<script>
var app = new Vue({
el:"#box",
data:{
},
methods:{
// get 请求
handleFetch(){
fetch("https://autumnfish.cn/comment/music?id=186016&limit=1")
// 第一个 .then 拿到相应的状态码
.then(res=>{
console.log("响应状态码及请求信息:",res) // 第一个 .then 可以简写为 .then(res=>json())
return res.json() // res.text() 吧数据转成文本
}) // 第二个 .then 拿到转换后的数据
.then(res=>{
console.log("res的全部信息:", res) // 这些数据都可使用对象的方式取出
})
},
}
})
</script>
</body>
</html>
POST
- post 请求有两种方式, 一种是通过form表单方式, 一种是通过json对象方式, 我说的是数据的请求发送方式
form表单
handlePOST(){
fetch("http://www.liulongbin.top:3005/api/post", {
method: 'POST',
mode: "cors",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
} ,
body: "name=xiaoming&age=18",
// credentials: "include" // 加上这个才会带上cookie, 默认没有
}).then(res=>res.json().then(res=>{
console.log(res)})
)},
看到这里注意到啦吧, post请求与get请求之间区别就是多啦一个大对象, 在这个对象里面可以使用method指定请求的方式, 在headers中指定数据传输的格式
json对象
// 使用json对象发送post请求
fetch("https://m.vip.com/server.html?rpc&method=pageCache&f=www&_=1563946036520", {
method: 'post',
headers: {
"Content-Type": "application/json"
} ,
body: JSON.stringify({
name : "xiaoming",
age: 18
})
// credentials: "include" // 加上这个才会带上cookie, 默认没有
}).then(res=>res.json().then(res=>{
console.log(res)})
两个发送数据的方式不同, 要在headers中的
Content-Type指明
注意:
Fetch 请求默认不带cookie的, 需要设置fetch(url, {credentials:“include”})
axios
- 需要导入axion包
可以导入联网的js包
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
也可以下载到本地进行导入, 与vue.js导入方式一样
使用
axios.get("")
axios.post("")
axios.put("")
axios.delete("")
- axios 使用起来我觉得比上面那个fetch好用一点
<!--
File: ajax_axios.html
Created Date: 2020-12-18 10:27:10
Author: 蓝小白
Contact: <[email protected]>
Last Modified: Friday December 18th 2020 16:18:21 pm
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script> <!--导入本地vue.js-->
<script src="axios.js"></script> <!-- 导入本地axios.js -->
</head>
<body>
<div id="box">
<button @click="handleget"> ajax-handleget </button>
<button @click="handleformPOST"> ajax-handleformPOST </button>
<button @click="handlejsonPOST"> ajax-handlejsonPOST </button>
</div>
<script>
var app = new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
// get 请求
handleget(){
axios.get("https://autumnfish.cn/comment/music?id=186016&limit=1").then(res=>{
console.log(res)
//console.log(res.data)
// this.datalist = res.data
})
},
handleformPOST(){
// 使用form表单发送数据
axios.post("http://www.liulongbin.top:3005/api/post", "name=zs").then(res=>{
console.log(res)
})
},
handlejsonPOST(){
// 使用json对象发送数据
axios.post("http://www.liulongbin.top:3005/api/post", {
name:"xiaom"}).then(res=>{
console.log(res)
})
},
}
})
</script>
</body>
</html>
上面代码中的vue.js和axios.js我使用的都是本地的