一、了解Ajax
Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
二、axios是什么
Axios,是一个基于promise [5]的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
三、使用axios
1、导入依赖
npm install axios
2、封装axios
request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
const instance = axios.create({
//请求的基础路径
baseURL:"http://localhost:8080/account",
//超时时间(毫秒)
timeout:10000
})
//请求拦截器
instance.interceptors.request.use(
config =>{
//请求前设置请求信息
config.headers['Content-Type'] = 'application/json;charset=utf-8'
// let token = window.localStorage.getItem('token')
// if(token != null){
// config.headers.set('token',token)
// }
//设置完成后必须返回config
return config
},
error =>{
console.log(error.message)
return Promise.reject(error)
}
)
//返回拦截器
instance.interceptors.response.use(
(response) => {
//响应状态码为200时执行
//提取token
// const localtoken = window.localStorage.getItem("token")
// if(localtoken == null){
// let token = response.data.data.token
// if(token != null){
// console.log(token)
// //将token存入localstorage
// window.localStorage.setItem('token',token)
// }
// }
//未登录则清空token
// let code = response.data.code
// if(code == 401){
// window.localStorage.removeItem("token")
// }
// let res = response.data
// if(typeof res === 'string'){
// res = res ? JSON.parse(res) : res
// }
// console.log(res)
let code = response.data.code
if(code == 200){
let messages = response.data.message
ElMessage({
message: messages,
type:'success'
})
}else{
let messages = response.data.message
ElMessage({
message: messages,
type: 'error'
})
}
return response
},
(error) => {
//返回异常处理
console.log(error.message)
//最后一定要返回一个promise
return Promise.reject(error)
}
)
//向外导出
export default instance
在这里我们将axios封装成我们自定义的对象,使用时只需要引用request.js即可
3、使用axios发起请求
<script>
import {ref} from 'vue'
import request from 'request.js'
//定义接收数据对象
const result = ref({})
//POST请求
const postRequest = async() => {
return request.post('/hello',value) // '/hello'是请求路径,是拼接在我们统一定义的请求头后面,value是json传参携带的对象
}
//GET请求
const getRequest = async() => {
return request.get('/hello',{
params:{
size:2 //这是param传参时携带的数据,key:value类型
}
})
}
//调用接口请求数据
const upload = async()=>{
//post请求,get一样的步骤
const {data} = await postRequest()
result.value = data
}
</script>