Vue——Axios

06-01 1143阅读

一、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]])

      Vue——Axios
      （图片来源网络，侵删）

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

      Vue——Axios
      （图片来源网络，侵删）

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

      Vue——Axios
      （图片来源网络，侵删）

      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

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

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码