目录
执行安装命令:npm install axios
使用的时候导入
axios以data,params,headers传参方式的区别
axios封装
是一个基于 promise 的 网络请求库,作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。
停止服务,在所在项目终端,
执行安装命令:npm install axios
查看是否安装成功,依赖中存在axios就是安装成功
使用的时候导入
import axios from 'axios'
axios 官网
请求配置 | Axios中文文档 | Axios中文网
<template>
登录 <input type="button" @click="handss" />
状态 <input type="button" @click="state" />
两种形式 <input type="button" @click="twost" />
</template>
<script>
import axios from 'axios'
export default {
data() {
},
methods: {
handss() {
axios.post('/api/admin/employee/login', {
username: 'admin',
password: '123456'
}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error.response)
})
},
state() {
axios.get('/api/admin/shop/status', {
headers: {
token: 'eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzE5MTEzNzg1fQ.e1lKC_hCAw1jAKzqgkIUEzWlJ0iDBqSQUs8-L4EUYgI'
}
})
},
twost() {
axios({
url: '/api/admin/employee/login',
method: 'post',
data: {
username: 'admin',
password: '123456'
}
}).then((res) => {
console.log(res.data.data.token)
}).catch((error)=>{
console.log(error)
})
}
}
}
</script>
axios以data,params,headers传参方式的区别
-
params的对象参数名和值,axios的源码会把参数和值,拼接在ulr?后面拼接给后台
-
data的对象参数和值,axios源码会把参数和值,拼接·在请求体(body参数)
-
headers将传递的参数挂载到请求头上
axios封装
下面几乎 就是固定写法,拿来就用,封装了基础的路径,对每个请求进行拦截并添加token,
import axios from 'axios'
const instance = axios.create({
// 基路径
baseURL: 'http://localhost:8080/kongkongSelect',
timeout: 1000,
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 存在token则往header里面添加一个token
if(localStorage.getItem('token')){
config.headers.token=localStorage.getItem('token')
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
// 如果后台报错提示一下 ,后台报错和axios 报错 执行的位置不一样
if(response.data.code!=200){
// 提示一下
}
//这个地方返回的东西就是你调用的时候res得到的东西
return response;
}, function (error) {
//axios报错执行这里
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
// 最后导出
export default instance
最后需要export default ,export default 和export 区别看这篇文章
export 与export default 区别
http://t.csdnimg.cn/i7gOghttp://t.csdnimg.cn/i7gOg
调用上面导出, export default则不需要{ },并可以起任意名称,因为只有一个不会引起歧义
import request from '@/utils/request'
/**
*
* 员工管理
*
**/
// 登录
export const login = (data: any) =>
request({
'url': '/employee/login',
'method': 'post',
// `data` 是作为请求体被发送的数据 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
'data': data
})
// 分页查询
export const EmployeepageList = (params: any) =>
request({
'url': `/employee/page`,
'method': 'get',
// 可以简写为params,但前提是参数是params
'params':params
})
传递数据的时候一般传递的是JSON字符串
注:在使用axios时,经常会遇到跨域问题。为了解决跨域问题,可以在 vue.config.js 文件中配置代理:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
port:8081,
proxy:{
'/api':{
target: 'http://localhost:8080',
pathRewrite: {
'^/api': ''
}
}
}
}
})