网站做支付按流量付费淘宝网电脑版登录入口官网
一、Axios 是什么
Axios 是一个基于 promise 网络请求库，作用于 node.js 和浏览器中。 它是 isomorphic 的 ( 即同一套代
码可以运行在浏览器和 node.js 中 ) 。在服务端它使用原生 node.js http 模块 , 而在客户端 ( 浏览端 ) 则使
用 XMLHttpRequests 。
官网地址： https://www.axios-http.cn/
二、Axios的特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 超时处理
- 查询参数序列化支持嵌套项处理
- 自动将请求体序列化为：
- JSON ( application/json )
- Multipart / FormData ( multipart/form-data )
- URL encoded form ( application/x-www-form-urlencoded )
- 将 HTML Form 转换成 JSON 进行请求
- 自动转换JSON数据
- 获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
- 为 node.js 设置带宽限制
- 兼容符合规范的 FormData 和 Blob（包括 node.js）
- 客户端支持防御XSRF
三、安装
使用 npm:
$ npm install axios
四、请求方式
- axios.request(config)[]
- axios.get(url[, config])[]
- axios.delete(url[, config])[]
- axios.head(url[, config])[]
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
- axios.postForm(url[, data[, config]])
- axios.putForm(url[, data[, config]])
- axios.patchForm(url[, data[, config]])
详细介绍：
Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境中。它提供了多种请求方法，每种方法都有其特定的用途和参数配置。以下是这些请求方式的详细介绍：
axios.request(config)
axios.request(config) 是一个通用的请求方法，允许用户自定义请求的所有配置。config 参数是一个对象，包含了请求的 URL、方法、头信息、数据等。
axios.request({method: 'get',url: '/user/12345'
});
axios.get(url[, config])
axios.get(url[, config]) 用于发送 GET 请求。url 是请求的目标地址，config 是可选的配置对象。
axios.get('/user/12345').then(response => console.log(response.data));
axios.delete(url[, config])
axios.delete(url[, config]) 用于发送 DELETE 请求。url 是请求的目标地址，config 是可选的配置对象。
axios.delete('/user/12345').then(response => console.log('User deleted'));
axios.head(url[, config])
axios.head(url[, config]) 用于发送 HEAD 请求。url 是请求的目标地址，config 是可选的配置对象。
axios.head('/user/12345').then(response => console.log(response.headers));
axios.options(url[, config])
axios.options(url[, config]) 用于发送 OPTIONS 请求。url 是请求的目标地址，config 是可选的配置对象。
axios.options('/user/12345').then(response => console.log(response.data));
axios.post(url[, data[, config]])
axios.post(url[, data[, config]]) 用于发送 POST 请求。url 是请求的目标地址，data 是请求体数据，config 是可选的配置对象。
axios.post('/user', {firstName: 'John',lastName: 'Doe'}).then(response => console.log(response.data));
axios.put(url[, data[, config]])
axios.put(url[, data[, config]]) 用于发送 PUT 请求。url 是请求的目标地址，data 是请求体数据，config 是可选的配置对象。
axios.put('/user/12345', {firstName: 'Jane',lastName: 'Doe'}).then(response => console.log(response.data));
axios.patch(url[, data[, config]])
axios.patch(url[, data[, config]]) 用于发送 PATCH 请求。url 是请求的目标地址，data 是请求体数据，config 是可选的配置对象。
axios.patch('/user/12345', {firstName: 'Jane'}).then(response => console.log(response.data));
axios.postForm(url[, data[, config]])
axios.postForm(url[, data[, config]]) 用于发送表单格式的 POST 请求。url 是请求的目标地址，data 是表单数据，config 是可选的配置对象。
axios.postForm('/user', {firstName: 'John',lastName: 'Doe'}).then(response => console.log(response.data));
axios.putForm(url[, data[, config]])
axios.putForm(url[, data[, config]]) 用于发送表单格式的 PUT 请求。url 是请求的目标地址，data 是表单数据，config 是可选的配置对象。
axios.putForm('/user/12345', {firstName: 'Jane',lastName: 'Doe'}).then(response => console.log(response.data));
axios.patchForm(url[, data[, config]])
axios.patchForm(url[, data[, config]]) 用于发送表单格式的 PATCH 请求。url 是请求的目标地址，data 是表单数据，config 是可选的配置对象。
axios.patchForm('/user/12345', {firstName: 'Jane'}).then(response => console.log(response.data));
这些方法提供了灵活的方式来处理不同的 HTTP 请求，使得开发者能够根据具体需求选择合适的请求方式。
五、基本实例
导入axios：
import axios from 'axios'
GET 请求：
const doGet = ()=>{
alert("Get")
// axios.get("url",{}).then(函数).catch(函数)
// promise 语法 .then .
axios.get("https://apifoxmock.com/m1/5559918-5237013-default/news",{
// params 请求参数
params:{cid:1},
headers:{}
})
// 正常情况 使用then 接受结果
.then((res)=>{
console.log(res.data)
})
// 异常 使用catch处理
.catch(reason=>{
console.log(reason)
})
} POST 请求：
const doPost = ()=>{
// post("url",data,{})
// axios.post("https://apifoxmock.com/m1/5559918-5237013-default/add",
{username:"aaaa",pwd:"00000"})
// .then(res=>{
// console.log(res.data)
// alert(res.data.msg)
// })
// .catch(reason=>{
// console.log(reason)
// })
axios.request({
url:"https://apifoxmock.com/m1/5559918-5237013-default/add",
data:{u:1,pwd:2},
method:"POST",
headers:{},
params:{}
})
} 跨域：后端方案 - 配置允许跨域
@Configuration
public class AccessControlAllowOriginConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true)
.maxAge(3600)
.allowedHeaders("*");
}
} 前端方案 - 本地服务器代理
项目目录中创建 vue.config.js 内容如下：
module.exports = {
// 开发服务器
devServer: {
port: 8082, // 修改启动端口号
proxy: {
'/api': { // 请求相对路径以 /api 开头的，才会走这里的配置
target: 'http://127.0.0.1:8080', // 这个就是后端地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
六、项目封装
src->util->request.js ( 全局配置 )
import axios from "axios";
// 全局配置
const service = axios.create({
// 请求的根路径：一般配置域名
//实际的请求： baseUrl+url
baseURL:"https://apifoxmock.com/m1/5559918-5237013-default",
timeout:5000
})
export default service 每个页面都有很多请求，按照页面划分请求， src->api-> 页面名称 .js ——index.js
import service from "../util/request";
// 配置首页的所有请求
// 首页中 获取新闻列表
export function getNews(params){
return service.request(
{
url:"/news",
params,
method:"GET"
}
)
}
// 首页 获取菜单列表
export function getMenu(params){
return service.get(
"/menu",{
params
}
)
} 页面中使用
const doGet1 = ()=>{
getNews({cid:1}).then(res=>{
console.log(res.data)
})
}七、拦截
请求拦截：用于登录，所有登录的 api 加上 token。
响应拦截： 统一处理异常：登录失效等等。
代码实例 request.js
import axios from "axios";
// 全局配置
const service = axios.create({
// 请求的根路径：一般配置域名
//实际的请求： baseUrl+url
baseURL:"https://apifoxmock.com/m1/5559918-5237013-default",
timeout:5000
})
// 请求拦截
service.interceptors.request.use(
config => {
console.log("请求拦截，所有请求先经过拦截器!!!!")
// 登录成功 将token 存入 localstorage
// 所有请求 带token(用户标识)
config.headers['token'] = localStorage.getItem('usertoken') || '';
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截
service.interceptors.response.use(
response=>{
if(response.data.code=="30000"){
// token失效
// route.push({url:"/login"})
}
},error=>{
}
)
export default service(*￣︶￣)——课堂笔记更新中...