vue的axios详解
概述和安装
axios
axios是通过Promise对ajax的封装，是一个基于Promise 的Http库，可以在浏览器和Node.js中使用。
简单理解为：axios是一个封装好的，基于Promise的发送请求的方法，不用设置回调，直接调用then方法。
安装axios
cnpm install --save axios安装post请求的格式转换
cnpm install --save querystring发送请求
请求格式
axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
.then(res => {//res是响应信息
bannerObj.banner = res.data.banner
})
.catch(error=>{//捕获错误信息
console.log(error)
})
get请求
import axios from "axios"
axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo")
axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php",{
params:{
song:"mo"
}
})
post请求
POST接收的网络请求参数需要进行格式转化
npm install --save querystring
import axios from "axios"
import qs from "querystring"
axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({
user_id:"[email protected]",
password:"iwen123",
verification_code:"crfvw"
}))并发请求
在真实场景中，有可能会需要一次性获取多个网络请求的结果
import axios from "axios"
function getBanner(){
return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
}
function getChating(){
return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexChating.php")
}
onMounted(() =>{
axios.all([getBanner(), getChating()])
.then(axios.spread((banner,chating) =>{
console.log(banner.data,chating.data);
}))
}) 全局引用
全局引用方案一
vue的全局处理方案 app.config.globalProperties可以实现
main.js
import axios from "axios"
app.config.globalProperties.$axios = axios
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
proxy.$axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
全局引用方案二
利用依赖注入，利用Provide和Inject
main.js
import axios from "axios"
app.provide("axios",axios)
import { inject } from "vue"
const axios = inject("axios")
axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
跨域配置
修改vite.config.js，修改完要重启服务器
server: {
proxy: {
'^/api': {//用/api代替产生跨域的地址,即http://iwenwiki.com
target: 'http://iwenwiki.com', //指向当前产生跨域的地址,即后端服务实际地址
changeOrigin: true, //开启代理
rewrite: (path) => path.replace(/^\/api/, '/api/blueberrypai')//让/api代替http://iwenwiki.com/api/blueberrypai,也可以继续拼接
}
}
}封装
封装axios
src/utils/request.js
import axios from "axios"
import qs from "querystring"
/**
* 处理响应失败，给开发者更明确的错误信息
* status:状态吗 2x成功 3x重定向 4x前端错误 5x后端错误
* info:具体信息
*/
const errorHandle = (status, info) => {
switch (status) {
case 400:
console.log("语义错误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器请求拒绝执行");
break;
case 404:
console.log("请检查网路请求地址");
break;
case 500:
console.log("服务器发生意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
/**
* 创建Axios对象
*/
const instance = axios.create({
baseURL: "http://localhost:8001",//公共配置url
timeout: 5000,//配置5s超时
withCredentials: true//访问允许携带cookie
})
/**
* 拦截器(发送请求/响应结果之前都可以拦截)
*/
instance.interceptors.request.use(//请求拦截
//成功函数 config：请求信息
config => {
if (config.method === 'post') {
// POST接收的网络请求参数需要进行格式转化
config.data = qs.stringify(config.data)
}
return config
},
//失败函数
error => Promise.reject(error)
)
instance.interceptors.response.use(//响应拦截
//成功函数
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
//失败函数，响应主要处理error情况
error => {
const { response } = error;
if (response) {
errorHandle(response.status, response.info)
} else {
console.log("网络请求被中断了");
}
}
)
//导出
export default instance封装公共地址和访问接口路径
src/api/base.js
/**
* 公共地址和访问接口路径
*/
const base = {
baseURL: "http://localhost:8301", //公共地址
login: "/admin/login", //登录地址
//username:"/admin/getUsername", //登录用户名(问题未解决)
//permission:"/admin/getPermissions", //登录用户权限(问题未解决)
permission:"/admin/getPermission", //登录用户权限(暂时先用)
linedata:"/line/data",//折线图动态数据
projectSearch:"/project/search",//项目信息的分页查询
projectAdd:"/project/add",//添加项目
}
//导出
export default base
封装请求
src/api/index.js
/**
* 封装网络请求
*/
import axios from "../utils/request.js"//引入封装的axios
import base from "./base.js"//引入封装的公共地址和访问接口路径
const api = {
//登录
getLogin(params) {
return axios.post(base.baseURL + base.login, params)
},
//获取登录用户名
//getUsername(){
// return axios.get(base.baseURL+base.username)
//},
//获取用户权限
//getPermissions(){
// return axios.get(base.baseURL+base.permission)
//},
//获取用户权限(暂用)
getPermissions(params) {
return axios.get(base.baseURL + base.permission, {//get请求记得加{}
params
})
},
//获取折线图数据
getLinedata() { return axios.get(base.baseURL + base.linedata) },
//项目信息的分页查询
getProjectSearch(params) {
return axios.get(base.baseURL + base.projectSearch, {//get请求记得加{}
params
})
},
addProject(params){
return axios.put(base.baseURL+base.projectAdd,params)
}
}
//导出
export default api
使用
import axios from "../utils/request"
axios.get("/api/blueberrypai/getIndexBanner.php")
.then(res => {
console.log(res.data.banner)
})
.catch(error => {
console.log(error)
})
axios.post("/api/blueberrypai/login.php", {
user_id: "[email protected]",
password: "iwen123",
verification_code: "crfvw"
})
.then(res => {
console.log(res.data);
})
.catch(error => {
console.log(error);
})
分页查询封装
/**
* 网路请求：分页查询
* */
const http = (search, page, size) => {
api.getProjectSearch({
search, page, size
}).then(res => {
console.log(res.data)
if (res.data.code == 200) {
totalData.value = res.data.data.total
projectSearch.list = res.data.data.records
}
}).catch(error => {
console.log(error);
})
}
onMounted(() => {
http(null, 1, 10)
})