简洁用法-------发送get请求
# 第一种 （适合少量参数）
axios.get('/api/url?参数名1=参数值1&参数2=参数值2').then(res => {
// res.data就是后端响应的数据
}).catch(err => {
// err就是错误信息（请求挂掉了 断网了）
})
# 第二种（适合多个参数）
axios.get('/api/url', {
params: {
参数名1：参数值，
参数名2：参数值
}
}).then(res => {
// res.data就是后端响应的数据
}).catch(err => {
// err就是错误信息（请求挂掉了 断网了）
})
简洁用法--------发送post请求
# 发送post请求 （ 记得： 只有一层{}哦~~~ ）
axios.post('/api/url', {
参数名1：参数值，
参数名2：参数值
}).then(res => {
// res.data就是后端响应的数据
}).catch(err => {
// err就是错误信息（请求挂掉了 断网了）
})
axios.post('/api/url', Qs.stirngify({ // 把参数格式转为 Form Data （仿form表单数据提交）
参数名1：参数值，
参数名2：参数值
}).then(res => {
// res.data就是后端响应的数据
}).catch(err => {
// err就是错误信息（请求挂掉了 断网了）
})
对象写法------get请求
const API = 'http://139.9.177.51:3333'
// 第一种
axios({
method: 'get',
url: API + '/api/testGet?name=小貂蝉',
}).then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
// 第二种
axios({
method: 'get',
url: API + '/api/testGet',
params: {
name: '老貂蝉'
}
}).then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
对象写法------Post请求
const API = 'http://139.9.177.51:3333'
axios({
method: 'post',
url: API + '/api/testPost',
data: {
name: '翔仔'
}
}).then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
实例对象写法
// const API = 'http://139.9.177.51:3333'
// 创建一个axios的实例对象
const instance = axios.create({
baseURL: 'http://139.9.177.51:3333', // 请求服务器地址 会自动拼接在 请求地址前面
timeout: 10000, // 超时时间
})
// 使用instance来发送ajax
instance.get('/api/testGet?name=小貂蝉')
.then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
instance.post('/api/testPost', {
name: '小飞飞'
})
.then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
// 使用instance来发送ajax
instance({
method: 'get',
url: '/api/testGet',
params: {
name: '小貂蝉1'
}
})
.then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
instance({
method: 'post',
url: '/api/testPost',
data: {
name: '小飞飞'
}
})
.then(res => {
console.log(res.data)
}).catch(err => {
console.log(err)
})
在公司一般3层封装
为了统一管理接口，方便后期维护。
第一层
安装axios Yarn add axios || npm i axios -D 封装请求 默认地址 请求拦截器 响应拦截器 请求超时 在utils文件下 新建一个工具 request.js 配置地址 拦截器 超时
// 1. 引入axios
import axios from 'axios';
// 请求默认地址
axios.defaults.baseURL = 'http://127.0.0.1:5000/';
// 请求超时
axios.defaults.timeout = 10000;
// 请求拦截器
axios.interceptors.request.use((config) => {
return config;
}, (error) => {
// 失败回调
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use((response) => {
return response;
}, (error) => {
// 失败回调
return Promise.reject(error);
});
// 暴露当前文件
export default axios
第二层
分模块管理自己的接口 方便维护新建一个api文件夹，封装模块对应的接口。
如：账号模块 建立一个acc.js
/ 账号模块 专门管理账号
import request from '@/utils/request';
// 引入qs 安装axios后会自动安装qs node和php写的后台需要用qs转一下，java不用。
// qs只需要在post请求中 转换参数 Qs.stringify(参数)
import Qs from 'qs';
// 登录接口
export const login_api = (data) => {
return request({
method: 'post', // 请求方式
url: '/users/checkLogin', // 请求地址
data: Qs.stringify(data) // 参数
});
}
//post
export const acc_api = (params) => {
return request({
method: 'get', // 请求方式
url: '/users/checkLogin', // 请求地址
params: params // 参数
});
}
//get 是params post 是data 对象里面可以简写
第三层： 在组件中调用对应的api文件
先在组件中引入 第二层
import { login_api } from '@/api/acc.js'
// 点击登录按钮
submitForm() {
// ui框架自带的方法 validate((valid)=>{ valid就是验证结果 });
this.$refs.loginForm.validate(async (valid) => {
if (valid) {
// 调用api函数 传入对应的参数
let res = await login_api({
account: this.loginForm.acc,
password: this.loginForm.pwd,
})
console.log(res.data)
let { code, msg, role, token } = res.data
// 判断一下 code
if (code == 0) {
this.$message({
type: 'success',
message: msg,
})
} else {
this.$message.error(msg)
}
} else {
return
}
})
},
发请求的方式 有2中
方式一：
函数({参数1,参数2}).then((res)=>{ 成功回调 }).catch((err)=>{ err失败回调 })
方式二:
async 父函数(){
let res = await 函数(x1,x2)
res就是响应结果
}
简单第二种封装接口
import axios from "axios"//导入需要axios
axios.defaults.baseURL="http://127.0.0.1:5000"
//封装一个登录函数
export const checkLogin=params=>axios.post("/users/checkLogin",params)
// export const checkLogin=function(params){
// return axios.post("/users/checkLogin",params)
// }
//封装添加账号函数
export const usersAdd=params=>axios.post("/users/add",params)
//封装获取账号列表
export const usersList=params=>axios.get("/users/list",{params})
//修改用户
export const usersEdit=params=>axios.post("/users/edit",params)
//验证token
export const checkToken=params=>axios.get("/users/checktoken",{params})
//根据id获取个人信息
export const accountInfo=params=>axios.get("/users/accountinfo",{params})
