get 获取数据
post 添加
put 修改
delete 删除
axios底层对象是xhr
安装axios命令:
npm i axios
get请求:
<template>
<div>
<ul>
<li v-for="item in list" :key="item.title">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
// 先使用npm i axios 安装
import axios from 'axios'
export default {
data() {
return {
list: []
}
},
// 组件创建后发送请求
created() {
// 方法一 发送get请求 querystring 查询字符串传递参数 拼接字符串
// axios.get('https://api.jiasiyuan.cn/news?page=1').then((res)=>{
// // res response 响应 服务端返回给客户端的信息
// console.log(res.data);
// this.list = res.data.result
// })
// 方法二 发送get请求 使用配置对象进行设置参数 最终axios自己拼接参数
// axios.get(url,config[对象])
axios
.get('https://api.jiasiyuan.cn/news', {
params: { page: 2 }
})
.then((res) => {
// res response 响应 服务端返回给客户端的信息
console.log(res.data)
this.list = res.data.result
})
}
}
</script>
<style lang="scss" scoped></style>
post请求:
<template>
<div>
<div v-for="item in list" :key="item.area">
{{ item.area }}:{{ item.counts }}
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
list: []
}
},
created() {
// axios发送post请求
// post请求可以传递url地址参数
// axios.post('https://api.i-lynn.cn/college?'+"name=hello").then((res) => {
// // console.log(res);
// this.list = res.data.data.list
// console.log(this.list)
// })
// post请求传递 请求体body参数
// axios.post(url,传递的数据[对象],配置项[对象])
// axios.post('https://api.i-lynn.cn/college?name=hello',{msg:'good'}).then((res) => {
axios
.post(
'https://api.i-lynn.cn/college',
{ msg: 'good' },
{ params: { name: 'jerry' } }
)
.then((res) => {
// console.log(res);
this.list = res.data.data.list
console.log(this.list)
})
}
}
</script>
<style lang="scss" scoped></style>
axios请求通用方法:
<template>
<div>
</div>
</template>
<script>
import axios from 'axios';
export default {
created(){
// axios({配置对象})
axios({
// 请求地址
url:'https://api.i-lynn.cn/college',
// 请求类型
method:'POST',
// 超时时间
timeout:5000,
// 自定义请求header
// jwt json web token 字符串 验证用户的登录身份
// 接口需要登录才可以获取到数据信息,通过验证token实现
headers:{
token:'sfsfsfsxxxxxx'
}
}).then(res=>{
console.log(res);
})
}
}
</script>
<style lang="scss" scoped>
</style>
axios封装拦截器基本方法:
<template>
<div>
</div>
</template>
<script>
import axios from 'axios';
export default {
created(){
// 请求拦截器 请求发送之前进行拦截 并统一进行请求配置
// 可以把一些通用的配置参数 在这里进行配置 比如说 token
axios.interceptors.request.use(cfg=>{
console.log(cfg);
// 统一配置参数
cfg.headers = {
token:'sfsfsfsxxxxxx'
}
// 返回配置项 不返回 请求就被取消
return cfg
})
// 响应拦截器
axios.interceptors.response.use(res=>{
// 对应返回的数据进行统一处理
console.log(res);
return res.data
})
axios.get('https://api.i-lynn.cn/college').then(res=>{
console.log(res);
})
}
}
</script>
<style lang="scss" scoped>
</style>
登录界面的请求
/**
* 统一封装请求方法
* 拦截器使用
* 请求统一配置
* 响应统一处理
*
*/
import axios from 'axios'
import { Message } from 'element-ui'
const instance = axios.create({
// 接口请求前缀
// baseURL: 'http://localhost:5000/api/v1',
// 接口请求超时时间
timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use((cfg) => {
// 如果登录后存储了token 就在后续发送请求中携带token在header请求头当中
if (localStorage.getItem('token')) {
cfg.headers.Authorization = localStorage.getItem('token')
}
// 返回配置 如果不返回 请求就取消
return cfg
})
// 响应拦截器
instance.interceptors.response.use((res) => {
// 方法二 通过请求响应拦击器 进行拦截
// 判断返回的code状态为401 token失效
// if (res.data.code === 401) {
// Message({
// message: '请登录',
// duration: 700,
// type: 'error',
// onClose: () => {
// window.location.href="/login"
// }
// })
// }
if (res.data.token) {
localStorage.setItem('token', res.data.token)
}
return res
})
export default instance
基本请求:
import axios from 'axios'
/**
* baseUrl 寄出地址 接口公共部分的地址
* timeout 链接超时时间
* 拦截器 一定返回参数 不返回 就中断
* 对请求进行拦截 进行统一配置 统一携带参数 token
* 响应拦截器 对响应进行拦截 对于数据进行统一格式处理
*/
const instance = axios.create({
baseURL: '',
timeout:1000,
//添加请求头信息
headers:{'Authorization' : localStorage.getItem('token')}
});
//请求拦截器
instance.interceptors.request.use(cfg =>{
return cfg
});
//响应拦截器
instance.interceptors.response.use(res =>{
return res
})
export default instance