Vue——Axios

一、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、方法、头信息、数据等。

javascript 复制代码

axios.request({
  method: 'get',
  url: '/user/12345'
});

axios.get(url[, config])

axios.get(url[, config]) 用于发送 GET 请求。url 是请求的目标地址，config 是可选的配置对象。

javascript 复制代码

axios.get('/user/12345')
  .then(response => console.log(response.data));

axios.delete(url[, config])

axios.delete(url[, config]) 用于发送 DELETE 请求。url 是请求的目标地址，config 是可选的配置对象。

javascript 复制代码

axios.delete('/user/12345')
  .then(response => console.log('User deleted'));

axios.head(url[, config])

axios.head(url[, config]) 用于发送 HEAD 请求。url 是请求的目标地址，config 是可选的配置对象。

javascript 复制代码

axios.head('/user/12345')
  .then(response => console.log(response.headers));

axios.options(url[, config])

axios.options(url[, config]) 用于发送 OPTIONS 请求。url 是请求的目标地址，config 是可选的配置对象。

javascript 复制代码

axios.options('/user/12345')
  .then(response => console.log(response.data));

axios.post(url[, data[, config]])

axios.post(url[, data[, config]]) 用于发送 POST 请求。url 是请求的目标地址，data 是请求体数据，config 是可选的配置对象。

javascript 复制代码

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 是可选的配置对象。

javascript 复制代码

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 是可选的配置对象。

javascript 复制代码

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 是可选的配置对象。

javascript 复制代码

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 是可选的配置对象。

javascript 复制代码

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 是可选的配置对象。

javascript 复制代码

axios.patchForm('/user/12345', {
    firstName: 'Jane'
  })
  .then(response => console.log(response.data));

这些方法提供了灵活的方式来处理不同的 HTTP 请求，使得开发者能够根据具体需求选择合适的请求方式。

五、基本实例

导入axios：
import axios from 'axios'
GET 请求：

javascript 复制代码

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 请求：

javascript 复制代码

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:{}
})
}

**跨域：**后端方案 - 配置允许跨域

java 复制代码

@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 内容如下：

javascript 复制代码

module.exports = {
// 开发服务器
devServer: {
port: 8082, // 修改启动端口号
proxy: {
'/api': { // 请求相对路径以 /api 开头的，才会走这里的配置
target: 'http://127.0.0.1:8080', // 这个就是后端地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}

六、项目封装

src->util->request.js ( 全局配置 )

javascript 复制代码

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

javascript 复制代码

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
}
)
}

页面中使用

javascript 复制代码

const doGet1 = ()=>{
getNews({cid:1}).then(res=>{
console.log(res.data)
})
}

七、拦截

**请求拦截：**用于登录，所有登录的 api 加上 token。
响应拦截： 统一处理异常：登录失效等等。
代码实例 request.js

javascript 复制代码

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

(*￣︶￣)------课堂笔记更新中...

一、Axios****是什么

二、Axios的特性

三、安装

四、请求方式

五、基本实例

六、项目封装

七、拦截

一、Axios是什么