1.axios异步请求
基本语法
axios({
url: 请求地址,
method:请求方式,
data: {POST参数},
params: {GET参数},
headers: {请求头}
}).then(response=>{
console.log(response服务器返回数据)
})
axios.get(url,{params:{get参数}}.then(response=>处理服务器返回数据))
axios.post(url,{post参数}).then(response=>处理服务器返回数据)
axios底层式怎么实现的
通过封装异步对象XMLHttpRequest、通过Promise的方式解决了异步调用的返回值问题,提供了便捷的操作函数,可以通过配置的方式调用,也可以通过提供的快捷函数直接发送请求完成数据异步请求
项目中安装axios
yarn add axios
2.axios封装
创建axios.js
import axios from "axios"
const instance = axios.create({
baseURL: "/api"
})
instance.interceptors.request.use(request=>{
return request
})
instance.interceptors.response.use(response=>{
return response.data
})
Component.proptotype.$axios = instance
export default instance
在index.js中引入封装的代码,让封装的axios生效
import './utile/axios'
3.fetch异步请求
fetch有抓取的意思,是浏览器封装的API,主要在新版浏览器中使用
基本语法:发送get请求
fetch("url").then(response=>response.json()).then(ret=>console.log('获取到服务器返回的数据',ret))
基本语法:发送POST请求
fetch("url",{method:"POST",headers:{'Content-Type':'application/json'}},body:JSON.stringify({'username':'admin',"password":"123456"})).then(reponse=>response.json()).then(ret=>console.log("获取到POST请求结果",ret))
基本语法:上传文件
let formData = new FormData()
formData.append("name","zhangsan")
formData.append("avatar",inputRef.files[0])
fetch('url',{
method:"POST",
body:formData
}).then(response=>response.json()).then(ret=>console.log("文件上传服务器返回的结果消息",ret))
5.fetch封装
//request可以发送GET、POST请求,默认发送GET请求,可以附带自定义请求头和请求体数据
function request(url,method="GET",header={},body={}){
const options = {
method.
headers:Object.assign({
"Content-Type": "application/json"
},headers)
}
if(method === "POST") {
options.body = JSON.stringfy(body)
}
return fetch(url,options).then(response=>response.json())
}
export default request
调用
request("/api/login","POST",_,{username:'zhangsan',password:'123456'}).then(ret=>alert('登录成功'))